使用JavaScript / jQuery添加和删除列表项

Question

我几乎是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>

我想做的是，当我点击“删除”锚点时，删除包含它的列表项。

（可选）我想以这样一种方式操作水果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--;
    });
});

“add”锚点能够如预期般工作。“remove”喝了一杯柠檬水......

所以，有什么想法吗？ 谢谢。

编辑：非常感谢大家的回答！ 我考虑了很多意见（因此我不会单独评论每个答案），最终使其像这样工作：

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

谢谢您的快速帮助！

- Mpampirina

---

$('a.remove').click(function(){ => $('a.remove').live('click',function(){ - Moak

Answer 1

a.remove事件绑定需要使用livehttp://api.jquery.com/live/绑定。这些节点是在文档准备好之后添加到DOM中的。

此外，我认为你想使用parent()而不是parentNode。除非我落后于我的jQuery知识，否则parentNode只是DOM操作，并且没有标准的remove()，它是removeChild()。在这里，你需要从parent()返回一个jQuery集合。

- Travis

---

我的个人意见是，除非绝对必要，否则不应该使用live，因为它会对性能产生相当大的影响。 - teuneboon

根据我的经验，大多数页面这并不是一个很大的问题。但是如果页面上有大量数据或DOM中有很多操作，则可能会有影响。 - Travis

Answer 2

原因是$('a.remove')只执行一次，所以只在你还没有任何删除链接的时候找到。为了解决这个问题，请像这样重写你的ADD函数：

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

只需删除您的旧删除函数。

编辑：哦，这仅适用于您添加的项目，如果在执行任何Javascript之前已在html中加载了一些列表项，请在$('a.add').click下添加此函数：

$('a.remove').click(function(){
    $(this).parent().parent().remove();
    i--;
});

- teuneboon

Answer 3

尝试使用以下代码：$(this).parents("LI").remove();

- ek_ny