jquery - 添加后删除列表项

Question

我有以下代码，

     $('.button').click(function(){
    var inputItem = $('.listItem').val();
    $('.thelist').append('<li class="item">'+inputItem+'</li><span        class="delete">delete</span>');    
});

 //TRYING TO REMOVE THE ITEM
 $(document).on('click','.delete',function(){
    $(this).remove(function(){
        $('.item').remove();
    });
 });

我对 jQuery 还是很陌生，谁能指出我正确的方向。谢谢

Answer 1

你可能想做这样的事情：

var $delete = $('<span>', {
    'class': 'delete',
    'text': 'delete'
});

$('.button').click(function () {
    $('<li>', {
        'class': 'item',
        'html': $('.listItem').val()
    }).append($delete.clone()).appendTo('.thelist');
});

$('.thelist').on('click', '.delete', function() {
    $(this).parent().remove();
});

您可以忽略我所做的其他更改，但这$(this).parent().remove();会删除<li>与<span>.

$(this).closest('li.item').remove();即使<span>不是 的孩子也可以工作<li>。

Answer 2

您好，如果满足您的查询，请查看此代码段：

var index=0;   //mock index variable
$('button').click(function (e){
   $('#theList').append('<span><li class="delete">hello world ' + index+ '</li></span>' ); 
    e.stopPropagation();   //stop bubbling of event

    index= index+1;
});


$(document).click(function (){ //click anywhere but the button and all <li> items disappear.
   $('.delete').remove();
});

您可以查看此jsFiddle 链接以获取更多信息。