JQuery没有删除添加的元素

时间:2010-03-22 08:37:44

标签: javascript jquery

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

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>

5 个答案:

答案 0 :(得分:3)

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

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

答案 1 :(得分: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();
    });
});

答案 2 :(得分:1)

试试这个

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

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

答案 3 :(得分:0)

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

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

答案 4 :(得分:-2)

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>