Question

我想要做的是添加和删除列表项。我已经将它添加到列表中的新项目，我可以删除现有的项目，但不删除已添加的项目。看起来它会起作用，但事实并非如此。任何帮助，将不胜感激！代码如下：

JQuery的：

<script  type="text/javascript">
$(function(){
    $('a#add').click(function(){
        $('<li><a href="#" id="remove">--</a>List item</li>').appendTo('ul#list');
    });

    $('a#remove').click(function(){ 
        $(this).parent().remove();
    });
});
</script>

HTML：

<a href="#" id="add">Add List Item</a>
<ul id="list">
<li><a href="#" id="remove">--</a> List item</li>
<li><a href="#" id="remove">--</a> List item</li>
<li><a href="#" id="remove">--</a> List item</li>
<li><a href="#" id="remove">--</a> List item</li>
</ul>

Answer 1

代码的问题不在于缺少唯一的id值 - 尽管应该使用一类'remove' - 主要问题是新添加的项目没有与之关联的点击处理程序他们。添加点击处理程序的代码在创建任何新项目之前执行。

应该调查live（）方法的使用 - 我不能在这方面提供更多建议，因为我自己还没有必要使用它。

Answer 2

你走了：

jQuery(function($) {
    $('#add').click(function(e) {
        $('<li><a href="#" class="remove">--</a>List item</li>').appendTo('#list');
        e.preventDefault();
    });

    $('.remove').live('click', function(e) { 
        $(this).parent().remove();
        e.preventDefault();
    });
});

Answer 3

试试这个

$('a#remove').live('click',function(){ 
        $(this).parent().remove();
    });

或

  $('a#remove').live('click',function(){ 
            $(this).remove();
        });

Answer 4

忽略您的元素应具有唯一ID属性的事实，有一件事要始终牢记：将函数绑定到事件时 - 例如$(selector).bind('click', function)或{{ 1}} - 只有DOM中与特定时刻的选择器匹配的元素才会按预期运行。如果您添加更多与之后选项匹配的元素，则这些元素不会神奇地与所需行为相关联。

这是$(selector).click(function) jQuery函数存在的原因之一，我建议你看一看。另一种方法是手动将所需的函数绑定到添加到DOM的元素（就像Felix向您展示的那样）。

Answer 5

id属性应该是唯一的，你的HTML是无效的，因此jQuery不起作用（我打赌a#remove选择器只选择第一项）。使用其他内容，例如name，这不应该是唯一的。此外，您可能希望使用.parent("li")。这是我如何做到这一点：

<强> jQuery的：

<script  type="text/javascript">
function setEvents() {
    $("a#add").click(function() {
        $("#list").append(
            $("<li>").append(
                $('<a href="#" name="remove">--</a>').click(removeItem)
            ).append("List item")
        );
    });

    $('a[name=remove]').click(removeItem);
}
function removeItem(e) {
    $(this).parent("li").remove();
}
$(document).ready(setEvents);
</script>

<强> HTML：

<a href="#" id="add">Add List Item</a>
<ul id="list">
<li><a href="#" name="remove">--</a> List item</li>
<li><a href="#" name="remove">--</a> List item</li>
<li><a href="#" name="remove">--</a> List item</li>
<li><a href="#" name="remove">--</a> List item</li>
</ul>

JQuery没有删除添加的元素

5 个答案: