Question

我有一个DIV，当我点击DIV中包含的链接时，我想删除它。这就是我所拥有的：

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

当我点击“关闭”时，我希望删除clients-edit-wrapper。我正在寻找一种方法来引用Close链接的父DIV，在这种情况下，它是clients-edit-wrapper。

非常感谢任何帮助！

以下黄山的答案：

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

这仅适用于您要删除的元素是两个父母。就我而言，这正是我所需要的。

Answer 1

给出你的HTML标记

已更新为.on（）

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

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

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

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

修改
（增加相关资源）
请参阅live()

上的jQuery文档

从jQuery 1.7开始，.live（）方法已弃用。使用.on（）来附加事件处理程序。旧版jQuery的用户应该使用 .delegate（）优先于.live（）。

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

Answer 2

这是一个解决方案：

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

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

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

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

Answer 3

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

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

});

Answer 4

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

Answer 5

您也可以使用closest。

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

Answer 6

由于你将元素作为父元素的基础，我鼓励事件授权：

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

Answer 7

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

Answer 8

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

单击时删除DIV

8 个答案: