jQuery empty()与remove()


99

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

Answers:


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

考虑:

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

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

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

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


这里是文档的链接,其中还包含示例:


1
那事件处理程序呢?我有一个奇怪的情况,其中empty + append两次,使用不同的追加导致第二组附加项执行第一组处理程序。
Killroy 2015年

1
@way为时已晚,但是他们也删除了处理程序。您有可能已使用诸如live或的功能注册了这些处理程序delegate
撤消

55

该文档对此进行了很好的解释。它还包含示例:

之前:

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

。去掉():

$('.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中删除,并且不再有对其的引用,则垃圾收集器将在运行时回收该内存。


空将不会触摸选择器的属性。如果要删除选择器元素的属性,我会注意到jQuery removeAttr和removeClass在firefox中存在问题。因此,我的选择是使用remove方法并再次添加container元素,然后将子节点附加到该元素。
randominstanceOfLivingThing 2013年

完美的总结,这解释得很好!对我来说,比接受的答案还要好。
JonSnow

2

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

声明时 $("body").remove() -删除整个HTML DOM和主体TAG。


17
此答案提供的内容已经存在三年了吗?
jcsanyi
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.