Question

基本HTML代码：

<div class="items">
     <div class="item">
         <span>item text</span>
         <i class="fa fa-times" aria-hidden="true"></i>
     </div>
</div>

追加子元素代码（jQuery）：

$('.items').append('<div class="item"><span>'+ text + '</span><i class="fa fa-times" aria-hidden="true"></i></div>');

删除元素代码（jQuery）：

$('.items .item i').click(function(){
    $(this).parent().remove();
});

基于HTML代码添加的子项（项），此子项将被删除“删除元素代码”。但是要添加的其他子项“追加子元素代码”未删除！

请指导我......

Answer 1

您需要使用 event delegation ，因为项目是动态添加的，否则事件处理程序不会附加到动态添加的dom元素。

$('.items').on('click','.item i',function(){
    $(this).parent().remove();
    // or  $(this).closest('.item').remove();
});

Answer 2

像click这样的事件处理程序将分配给所有当前匹配元素。由于未来的元素不存在，因此不会分配事件处理程序。您需要做的就是每次添加新元素时重新运行remove元素函数，以便将事件处理程序分配给该元素。或者，如果您希望它更干净，请将事件处理程序添加到特定的新元素，如此

$('<div class="item"><span>'+ text + '</span><i class="fa fa-times" aria-hidden="true"></i></div>').appendTo(".items").children("i").click(function(){
$(this).parent().remove();
});

这将取代您当前的追加功能

如何在页面上使用jQuery删除（）append（）子元素？

2 个答案: