javascript - (添加和)使用JavaScript/jQuery删除列表项

我在JavaScript和jQuery上几乎是个菜鸟，(所以在类似的帖子中，如果我找不到合适的答案，我深表歉意)。

这是东西。我有一个列表，每个列表项中都有很多东西:

<ul id="fruit_list">
    <li>
         <h4> Fruit 1: <a href="#" class="remove">remove</a> </h4>
         <p> blablabla </p>
    </li>

    <li>
         <h4> Fruit 2: <a href="#" class="remove">remove</a> </h4>
         <p> blablabla </p>
    </li>
</ul>

<a href="#" class="add">add</a>

我要做的是单击 anchor “删除”以删除包含它的列表项。

(可选地，我想操纵水果1，水果2等处的增量数，以这样的方式，当我删除项目＃2时，下一个成为＃2等。但是无论如何。)

所以这是我到目前为止写的:

$(function(){
    var i = $('#fruit_list li').size() + 1;

    $('a.add').click(function() {
        $('<li><h4>Fruit '+i+':<a href="#" class="remove">
             remove</a></h4><p>Blabla</p></li>')
        .appendTo('#fruit_list');
        i++;
    });

    $('a.remove').click(function(){

        $(this).parentNode.parentNode.remove();
        /* The above obviously does not work.. */
        i--;
    });
});

“添加” anchor 按预期工作。 “删除”喝柠檬水。

那么，有什么想法吗？
谢谢

编辑:谢谢大家的回答!
我考虑了您的许多意见(因此我不会在每个答案上分别发表评论)，最终使它像这样工作:

$('a.remove').live('click', function(){
    $(this).closest('li').remove();
    i--;
});

感谢您的快速帮助!

最佳答案

a.remove事件绑定(bind)必须是live http://api.jquery.com/live/绑定(bind)。在调用doc ready之后，将节点添加到DOM。

另外，我认为您想使用parent()而不是parentNode。除非我在jQuery上落后，否则parentNode只是DOM操作，没有标准的remove()，而是removeChild()。在这里，您需要从parent()返回的jQuery集合。

关于javascript - (添加和)使用JavaScript/jQuery删除列表项，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6087593/