jQuery empty() 与 remove()

Posted 2023-03-07

【中文标题】jQuery empty() 与 remove()

【英文标题】：jQuery empty() vs remove()

【发布时间】：2011-03-06 15:53:04

【问题描述】：

jQuery中的empty()和remove()方法有什么区别，当我们调用这些方法中的任何一个时，正在创建的对象都会被销毁并释放内存？

【参考方案1】：

文档解释得很好。它还包含示例：

.remove() .empty()

之前：

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

.remove():

$('.hello').remove();

之后：

<div class="container">
  <div class="goodbye">Goodbye</div>
</div>

---

之前：

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

.empty():

$('.hello').empty();

之后：

<div class="container">
  <div class="hello"></div>
  <div class="goodbye">Goodbye</div>
</div>

就内存而言，一旦一个元素从 DOM 中移除并且不再有对它的引用，垃圾收集器就会在它运行时回收内存。

【讨论】：

empty 不会触及选择器的属性。如果你想删除选择器元素的属性，我注意到 jQuery removeAttr 和 removeClass 在 Firefox 中是错误的。所以我的选择是使用 remove 方法并再次添加容器元素，然后将子节点附加到相同的元素。

完美的总结，这解释得很好！对我来说甚至比公认的答案更好。

【参考方案2】：

empty() 将清空其内容的选择，但保留选择本身。 remove() 将清空其内容的选择并删除选择本身。

考虑：

<div>
    <p><strong>foo</strong></p>
</div>

$('p').empty();  // --> "<div><p></p></div>"

// whereas,
$('p').remove(); // --> "<div></div>"

它们都删除了 DOM 对象，应该释放它们占用的内存，是的。

---

以下是文档链接，其中还包含示例：

.remove() .empty()

【讨论】：

事件处理程序呢？我有一个奇怪的情况，空+追加两次，不同的追加导致第二组附加项执行第一组的处理程序。

@way 为时已晚，但他们也删除了处理程序。您有可能将这些处理程序注册到 live 或 delegate 之类的函数中。

【参考方案3】：

$("body").empty() -- 它'删除了 body 标签内的 html DOM 元素 --

当您声明 $("body").remove() - 它会删除整个 HTML DOM 以及 body TAG。

【讨论】：

这个答案提供了哪些已经存在三年的现有答案中缺少的内容？