jQuery 删除功能真的会删除 Dom 元素吗？答案

【问题标题】：Does jQuery remove function really remove Dom elements?jQuery 删除功能真的会删除 Dom 元素吗？
【发布时间】：2012-05-23 08:58:43
【问题描述】：

我真的很想知道 jQuery remove 函数是否真的从 DOM 中删除元素。
首先，我查看了here，但答案并不令人信服。
当我注意到我仍然能够操作已调用删除函数的元素时，我遇到了这个问题。

我的代码：

<div id="container">
    <div id="div">
        This is a div
    </div>
</div>

var div = $('#div');
$('#div').remove();
$('#container').append(div);

注意：我的问题不是如何解决这个问题？，但我想了解这里发生了什么！

实际上，这段代码并没有从 dom 中删除 #div，但是如果我将任何 data 设置为 #div，它将丢失。我现在对 remove 函数的行为感到很困惑。任何人都可以解释一下吗？ DEMO

我确信 div 变量不仅仅是 dom 元素的克隆，而是对它的引用，因为当我操作 div 变量时（如 div.html('something')）div DOM 内得到更新。
还是我错了？

【问题讨论】：

是的，api.jquery.com/remove 可能会解开谜团:))
只要有东西引用了那个对象（存储在一个变量中），它就会从 DOM 中删除，但永远不会从内存中删除。
@Tats_innit 老兄，你真的以为我以前没看过吗？？
@skafandri 晚安！只是评论兄弟，没有汗水！ B-)
@skafandri：有很多人不会在你的鞋子里读到它。

标签： javascript jquery html dom

【解决方案1】：

remove() 确实从 DOM 中删除了该元素。

但是，在您的示例中，该元素已缓存在内存中，因为您将其分配给了 div 变量。因此你仍然可以使用它，并再次附加它，它仍然会包含原来所做的所有事件。

如果你说的是对的，那我为什么要松散绑定到 div 的数据呢？

如果您检查source for remove()，您会看到它调用了内部cleanData 函数，该函数删除了事件并清除了元素的data 缓存。这就是您丢失信息的原因。

如果您想从 DOM 中移除元素，但保留元素，请改用 detach()。

这是一个显示差异的小提琴：http://jsfiddle.net/2VbmX/

【讨论】：

mmmm 看起来很奇怪... div=reference to Dom ！然后他从 DOM 中删除了这些项目。因此，如果他尝试读取 div - 他应该得到 div ->reference to null ！
如果你说的是对的，为什么我会松动绑定到 div 的 data 呢？
@skafandri：数据保存在一个单独的对象中，而不是在 DOM 元素本身或其 jQuery 包装器上。最有可能的是，如果您 remove 某事 jQuery 决定它已经一去不复返了，并且还删除了它为它保留的数据以减少内存使用量。请记住，jQuery 不知道您的页面是否是一个创建和删除数千个元素的富应用程序，因此必须小心。
@skafandri 我已经更新了我的答案，并为你解释了
我确信 div 变量不仅仅是 dom 元素的 clone，它是一个 reference ，因为当我操作 div 变量时（如 div.html('something')），DOM 中的 div 会更新。还是我错了？

【解决方案2】：

不得不删除分配的变量：

delete div;

【讨论】：