Question

在添加prepend之后我无法删除元素编辑元素：

$('.add-btn').on("click",function(){
        tag = $('input.add-tag').val().toLowerCase();
        if (tag != '' && $.inArray(tag, tagsAr) == -1)
        {
            $('.tags-list').prepend('<li>'+tag+'<span class="del-tag"><b>X</b></span></li>');
            tagsAr.push(tag);
            $('.add-tag').val('');

        }
    });

删除元素：

$('.del-tag').on("click", function()
{
  $($(this).parents('li').get(0)).remove();
});

jsfiddle example

Answer 1

写：

$(".tags-list").on("click",".del-tag",function(){
    $($(this).parents('li').get(0)).remove();
});

Updated fiddle here.

Answer 2

使用event delegation，同时使用.closest()查找最近的li祖先元素

$('.tags-list').on("click", '.del-tag', function () {
    $(this).closest('li').remove();
});

演示：Fiddle

Answer 3

您在pageload或ready状态下绑定onclick事件，因此click事件将仅绑定到dom中已存在的元素。

因此，对于您的情况，我将代码修改为：

$(document).ready(function(){
var tagsAr = [];
    $('.add-btn').on("click",function(){
        tag = $('input.add-tag').val().toLowerCase();
        if (tag != '' && $.inArray(tag, tagsAr) == -1)
        {
            $('.tags-list').prepend('<li>'+tag+'<span class="del-tag" onclick="deletetag(this)"><b>X</b></span></li>');
            tagsAr.push(tag);
            $('.add-tag').val('');

        }
    });
    $('.del-tag').on("click", function(){

        deletetag(this);

    });
});

function deletetag($this)
{
    $($this).closest('li').remove();
}

检查小提琴here

前置后Jquery删除元素

3 个答案: