删除附加的父元素

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>