JQuery不删除添加元素

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

来源

2010-03-22 Scott

每个文档的'id'必须是唯一的。改用'class'。 – nickf 2010-03-22 08:47:49

试试这个

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

或

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

来源

2010-03-22 08:40:44 ant

这不起作用，因为'this'指向实时事件中的文档对象。 – Felix 2010-03-22 08:41:58

@Felix发布您的答案，然后让我们看看正确的解决方案 – ant 2010-03-22 08:45:27

当我看到您的答案时，我正在撰写它。现在发布:) – Felix 2010-03-22 08:47:23

-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>

来源

2010-03-22 08:46:41 Felix

name？为什么不“上课”？ – nickf 2010-03-22 08:48:26

感谢您指出身份证问题，我习惯性地将其替换为课堂上的习惯。 – Scott 2010-03-22 08:59:00

@nickf，因为类应该首先用于样式目的，JavaScript第二。为什么这是低调的地狱，没有人对它做任何负面评论.. – Felix 2010-03-22 09:17:14

在这里你去：

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(); 
    }); 
});

来源

2010-03-22 08:52:30 nickf

这看起来像我想的那种东西甚至可以使用一个类去除'标识符。 – belugabob 2010-03-22 08:58:51

与代码中的问题并不是缺乏唯一的id值 - 但是，呃应该使用一类“移除” - 主要问题是新添加的项目没有与它们关联的点击处理程序。添加点击处理程序的代码在任何新项目创建之前执行。

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

来源

2010-03-22 08:57:12 belugabob

感谢您的解释！ – Scott 2010-03-22 09:00:06

忽略你的元素应该有唯一的ID属性的事实，有一件事始终牢记：当你绑定功能的事件 - 例如$(selector).bind('click', function)或$(selector).click(function) - 只在DOM中的元素匹配选择器在特定时刻将按照您的期望行事。如果您在稍后的时间添加了与选择器相匹配的更多元素，这些元素不会神奇地与期望的行为关联。

这是jQuery函数live()存在的原因之一，我鼓励你看一看。另一种方法是手动将你想要的功能绑定到你添加到DOM中的元素（就像Felix给你展示的那样）。

来源

2010-03-22 09:00:53 Dan

JQuery不删除添加元素

回答

相关问题