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>

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

（我可以选择在Fruit 1，Fruit 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'锚点按预期工作。 '删除'喝柠檬水..

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

编辑：感谢大家的回答！我考虑了很多你的意见（所以我不会单独评论每个答案），最后让它像这样工作：

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

感谢您的快速帮助！

Answer 1

a.remove事件绑定需要是live http://api.jquery.com/live/绑定。调用doc ready后，节点将添加到DOM中。

此外，我认为您要使用parent()代替parentNode。除非我落后于我的jQuery，parentNode只是DOM操作，并且没有标准remove()，它是removeChild()。在这里，您需要从parent()返回的jQuery集合。

Answer 2

尝试$(this).parents("LI").remove();

Answer 3

原因是$('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--;
});

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

3 个答案: