jQuery 单击时删除 DIV

Remove DIV on Click

提问by FastTrack

I have a DIV which I want to be removed when I click a link contained inside that DIV. Here is what I have:

我有一个 DIV，当我单击该 DIV 中包含的链接时，我想将其删除。这是我所拥有的：

<div id="clients-edit-wrapper">
    <div class="close-wrapper">
        <a href="#" class="close-div">Close</a>
    </div>
</div>

When I click "Close" I want clients-edit-wrapperto be removed. I'm looking for a way to do this by referencing the parent DIV of the Close link which, in this case, is clients-edit-wrapper.

当我点击“关闭”时，我想clients-edit-wrapper被删除。我正在寻找一种方法来通过引用关闭链接的父 DIV 来做到这一点，在这种情况下，它是clients-edit-wrapper.

Any help would be greatly appreciated!

任何帮助将不胜感激！

---

---

Answer from Huangism below:

以下来自黄教的回答：

$('.close-div').click(function(){
   $(this).parent().parent().remove();
});

This only works if the element you would like to remove is two parents up. In my case, this is exactly what I needed.

这仅在您要删除的元素是两个父元素时才有效。就我而言，这正是我所需要的。

回答by Huangism

given your html markup

给定你的 html 标记

Updated to .on()

更新为 .on()

$('.close-div').on('click', function(){
    $(this).closest("#clients-edit-wrapper").remove();
});

More flexibility with .closest, this gives you the option to have more more parents or less parents.

使用 更灵活.closest，这使您可以选择拥有更多或更少的父母。

https://api.jquery.com/closest/

https://api.jquery.com/closest/

For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

对于集合中的每个元素，通过测试元素本身并在 DOM 树中向上遍历其祖先来获取与选择器匹配的第一个元素。

Edit
(Added related resources)
Please see jQuery documentation on live()

编辑
（添加相关资源）
请参阅关于live() 的jQuery 文档

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

从 jQuery 1.7 开始，不推荐使用.live() 方法。使用 .on() 附加事件处理程序。旧版本 jQuery 的用户应该优先使用 .delegate() 而不是 .live()。

As far as I know this is due to memory concerns/issues with live().

据我所知，这是由于内存问题/ live().

回答by VisioN

Here is one solution:

这是一种解决方案：

$(".close-div").on("click", function(event) {
    $("#clients-edit-wrapper").remove();
    event.preventDefault();
});

To get #clients-edit-wrapperelement relatively to .close-divelement, you can use either parent().parent()or closestwith ID:

要获取#clients-edit-wrapper相对于.close-div元素的元素，您可以使用parent().parent()或closest与 ID：

$(this).parent().parent().remove();                  // will do
$(this).closest("#clients-edit-wrapper").remove();   // the same

However, the last doesn't make sense, since IDs of page elements should be unique, and there won't be another #clients-edit-wrapper.

但是，最后一个没有意义，因为页面元素的 ID 应该是唯一的，并且不会有另一个#clients-edit-wrapper.

回答by Josh

$(".close-div").click(function(){

    $("#clients-edit-wrapper").remove();

});

回答by lucuma

You could use closestas well.

你也可以使用closest。

$('.close-div').on('click', function(e) {
  e.preventDefault();
  $('#clients-edit-wrapper').remove();
});

回答by Gabe

$('#clients-edit-wrapper').find('.close-div').click(function(){
   $('#clients-edit-wrapper').remove();
});

回答by Sampson

Since you base the element off the parent, I'd encourage event-delegation:

由于您基于父元素，我鼓励事件委托：

$("#clients-edit-wrapper").on("click", ".close-div", function(e){
    e.preventDefault();
    $(e.delegateTarget).remove();
});

回答by Aboodred1

<div id="clients-edit-wrapper">
    <div class="close-wrapper">
         <a href="#" onclick="$('#clients-edit-wrapper').remove();" class="close-div">Close</a>
    </div>
</div>

回答by shreekunj

$('body').on('click','.close-div', function(){
  $(this).closest("#clients-edit-wrapper").remove();
});