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 Link以获取更多信息。

附加后删除列表项

2 个答案: