Question

我有一个附加项目的列表制作者，但也会将垃圾桶项目添加到每个列表项目中。我在垃圾桶上有一个函数，它应该在单击时删除父元素，但它不起作用。

以下是我正在尝试做的简单版本

$('button').click(function() {
    $('#contain').append('<div class="div"></div>').append('<div class="nested"></div>');
});

$('.nested').click(function() {
    $(this).parent().remove();
});

如何删除仅单击嵌套div的父元素？

Answer 1

使用on()，因为您正在动态追加元素上调用事件。

play run

此外，我们也可以使用$('body').on('click', '.nested', function(){ $(this).parent().remove(); });代替$('#contain')。

$('body')

$('button').click(function() {
	$('#contain').append('<div class="div"></div>').append('<div class="nested"></div>');
});

$('body').on('click', '.nested', function() {
	$(this).parent().remove();
});

.div {
  width: 100px;
  height: 50px;
  background: #000;
  margin-top: 50px;
}
.nested {
  width: 50px;
  height: 25px;
  background: red;
  z-index: 100;
  margin-top: -25px;
  cursor: pointer;
}

Answer 2

试试这个：

dynamic

你必须听取容器上点击附加元素，因为当页面加载时它们不在DOM中

Answer 3

两个问题：

正如其他人所说，您绑定了.nested点击之前的事件你的元素被创建，意味着它没有附加事件处理程序正如其他人所提到的，$("#contain").on("click", ".nested", function() {})之类的内容将解决问题

$.append会返回附加到的元素，而不是附加的元素，因此.nested会嵌套在{{ 1}}。这意味着$("#contain")实际上正在返回$(this).parent()元素。该问题的解决方法是

#contain

Answer 4

更改

$('.nested').click(function() {
    $(this).parent().remove();
});

要

$(document).on("click",".nested",function(){ $(this).parent().remove(); })

删除附加的父元素

4 个答案: