Javascript jquery remove（）和detach（）方法

我不能区分jQuery移除和分离方法，因为两者的作用相同或相同，请考虑代码：

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

发件人：

.detach方法与.remove方法相同，不同之处在于.detach保留与已删除元素关联的所有jQuery数据。当删除的元素稍后要重新插入DOM时，此方法非常有用

移除会完全破坏元素。detach删除元素，保持其数据完整。

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

要将元素从文档中的一个位置移动到另一个位置，无需将其删除或拆离，只需将其附加到新位置即可：

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

---

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

.detach方法与.remove方法相同，不同之处在于.detach保留与已删除元素关联的所有jQuery数据。当删除的元素稍后要重新插入DOM时，此方法非常有用

请查看每个调用的API文档：

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

在中，您应该能够注意到以下场景中的差异：

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

然而，对于p2和btn2，事件处理程序是通过remove删除的，第二次单击该段落不会做任何事情

---

旁注：当您立即再次将detach附加到DOM中时，不需要调用detach。如果您想将元素存储在变量中一段时间，直到需要用相同的数据和行为重新附加它，那么分离可能很有趣。remove通常用于销毁一个元素，也用于清理任何相关数据。

如果它们彼此不同，那么它们的工作方式也应该不同。但在上面的代码中，它们的工作方式不同same@MaizerePathak你不会从视觉上看到差异。这是在幕后。jQuery使用.detach保留JavaScript中与数据关联的所有元素，同时使用.remove销毁数据。从视觉上看，它们是一样的。您不会在屏幕上看到JavaScript数据。@Maizere:您可以清楚地看到这两个方法的行为是不同的：。单击两个段落，字体大小将更改。现在，单击按钮，然后再次单击段落。分离的段落仍将更改大小。删除的段落将不可用。重新发布问题时，请先关闭第一个段落，然后再打开新段落@我不知道该关了，所以我离开了that@MaizerePathak只需删除此处引用的问题，并阅读未来发布指南。显示差异的演示：。单击两个段落，字体大小将更改。现在，单击按钮，然后再次单击段落。分离的段落仍将更改大小。删除的段落不会。@FelixKling我以为数据只是文本节点，我误解了术语数据。谢谢