javascript - 删除附加的父元素

Question

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

这是我正在尝试做的事情的简单版本

JSFiddle

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

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

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

Answer 1

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

$('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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Add
</button>

<div id="contain">
</div>