Question

我无法区分jquery remove（）和detach（）方法，因为两者的行为相同或工作相同，请考虑代码：

 <script>
$(document).ready(function(){
$("#btn1").click(function(){
  $("body").append($("#p1").detach());
    });
  $("#btn2").click(function(){
  $("body").append($("#p2").remove());
    });
 $("p").click(function(){
    $(this).animate({fontSize:"+=1px"})
  });
});
</script>

Answer 1

来自the docs：

.detach（）方法与.remove（）相同，除了.detach（）保留与删除的元素关联的所有jQuery数据。当删除的元素稍后要重新插入DOM时，此方法很有用。

remove()彻底摧毁了这个元素。 detach()删除元素，保持其数据不变。

Answer 2

detach方法不会删除与元素相关联的内部jQuery数据（例如事件绑定），因此只有在存在任何此类数据的情况下才会看到任何差异。

要在文档中将元素从一个位置移动到另一个位置，您不必将其删除或分离，只需将其附加到新位置：

$("body").append($("#p1"));

Answer 3

你不会看到两者之间的明显差异。摘录摘自jQuery文档：

.detach（）方法与.remove（）相同，除了.detach（）保留与删除的元素关联的所有jQuery数据。当删除的元素稍后要重新插入DOM时，此方法很有用。

请查看有关每个电话的API文档：

jQuery Remove

jQuery Detach

Answer 4

正如documentation所解释的那样，$.detach()会保留关联的jQuery数据，而$.remove()会删除该数据。此数据包含绑定事件，动画队列以及您使用$.data()手动添加的任何内容。

在your original example中，您应该能够注意到以下情况的不同之处：

点击该段落。
点击按钮。
再次点击该段落。

对于#p1和#btn1，第二次单击该段落仍将触发点击处理程序并使字体大小变大。这是因为事件处理程序存储在数据中并由detach()保留。因此，当将它重新附加到DOM时，处理程序仍然是绑定的。

但是对于#p2和#btn2，remove()删除了事件处理程序，第二次点击该段落将不会执行任何操作。

附注：当您再次将其附加到DOM时，无需致电detach()。如果要将元素存储在变量中一段时间，直到需要重新附加（具有相同的数据和行为），detach()可能会很有趣。 remove()通常用于销毁元素，也可以清除任何相关数据。

jquery remove（）和detach（）方法

4 个答案: