.parent().remove()问题

Question

我有一个基于jQuery的表单，您可以在其中添加额外的人员信息。 我正在克隆第一个字段集并将其添加到最后，最多可以添加3个附加人员。当您添加了1个额外的人员后，您可以选择删除该人员。

但是，我的删除按钮不起作用。之前它是可以工作的，直到我添加了其他函数来更改字段集中其他元素的ID。

我正在使用：

$(".remove").click(function() {
    $(this).parent().remove();

这段代码原本是可行的，但现在已经无法正常工作，我无法弄清楚原因。

我已经删除了停止第一个“删除此人”操作的代码行，只是为了展示第一个操作仍然有效，但其余操作则无法正常工作。（一旦修复后，我将把第一个操作定位到舞台外面）

如果需要更直观地查看问题，可以通过该链接进行查看。

所以，基本上，有什么想法，为什么我的“删除此人”操作在除第一个部分以外的所有部分都无法正常工作？

- leapin_leprechaun

Answer 1

尝试：

$(document).on('click', '.remove', function() {
    $(this).parent().remove();
});

事件绑定在页面加载时进行，因此新添加的元素不会被绑定。

- PeeHaa

---

这很可能会起作用，如果是这样的话，原因是当你执行$.click()时，它会将事件处理程序连接到所有当前存在与选择器匹配的元素，而$.live()则将其连接到所有当前或未来匹配的元素。如果新人的区块在运行连接事件处理程序的代码之后添加，那么当处理程序被连接时，它们不存在，因此没有包括在选择器中当事情发生时。 - Tomas Aschan

@Tomas: 实际上，.live() 不会钩住与选择器匹配的任何元素。它会为 window 或 document（我不记得哪一个）提供处理程序，并使用整个文档的事件代理。出于这个原因，我更喜欢使用 .delegate()，它也使用委派，但仅在您定义的容器内部使用。 - user113716

@patrick：你说得对。就性能而言，使用委托更好。尽管委托在内部也使用了live（带有额外的参数）。 - PeeHaa

是的，你说得对。因为它们在做同样的事情，jQuery将所有功能都合并到一个方法中。我认为如果他们只指定了一个公共委托方法会更好。 - user113716

Answer 2

'live'函数调用已被弃用且不再起作用。您可以在此处查找使用替代方法'on()'重写函数的说明，并获取有关弃用的更多信息：

http://api.jquery.com/live/

要处理所有当前和新创建的元素，您现在必须使用：

$(document).on("click", ".remove", function() {
    $(this).parent().remove();
});

jQuery运行在文档对象上，而不是元素本身，并且有一个额外的参数来指定需要观察和添加事件监听器的元素。

- Dave Hilditch

Answer 3

确保您关闭表达式：

$(".remove").click(function() {
    $(this).parent().remove();
});

- orolo

---

太棒了！非常感谢！真的很感激！我使用了下面这段代码，它有效地实现了我的需求：$(".remove").live("click",function() { $(this).parent().remove(); reset(); }); 再次感谢！太好了！ - leapin_leprechaun

Answer 4

您可以使用以下方法删除该父元素：

 $(document).on("click", ".remove", function() { 
      $(this).parent().remove(); 
 });

你也可以使用以下方法删除所有父级：

 $(document).on("click", ".remove", function() { 
      $(this).parents().remove();
 });

- Prais

Answer 5

这些元素最初并不存在，这意味着您需要使用 .live() 或 .delegate()

例如，将：

使用 $(".remove").live("click", ...) 而不是 $(".remove").click(...) 这样

- davin