jQuery empty() vs remove()
Solution 1
-
empty()
will empty the selection of its contents, but preserve the selection itself. -
remove()
will empty the selection of its contents and remove the selection itself.
Consider:
<div>
<p><strong>foo</strong></p>
</div>
$('p').empty(); // --> "<div><p></p></div>"
// whereas,
$('p').remove(); // --> "<div></div>"
Both of them remove the DOM objects and should release the memory they take up, yes.
Here are links to documentation, which also contains examples:
Solution 2
The documentation explains it very well. It also contains examples:
before:
<div class="container">
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
</div>
.remove():
$('.hello').remove();
after:
<div class="container">
<div class="goodbye">Goodbye</div>
</div>
before:
<div class="container">
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
</div>
.empty():
$('.hello').empty();
after:
<div class="container">
<div class="hello"></div>
<div class="goodbye">Goodbye</div>
</div>
As far as memory is concerned, once an element is removed from the DOM and there are no more references to it the garbage collector will reclaim the memory when it runs.
Solution 3
$("body").empty()
-- it' removes the HTML DOM elements inside the body tag -
when you declare $("body").remove()
- it remove the entire HTML DOM along with body TAG .
Related videos on Youtube
mabuzer
Updated on August 18, 2020Comments
-
mabuzer over 3 years
What's the difference between
empty()
andremove()
methods injQuery
, and when we call any of these methods, the objects being created will be destroyed and memory released? -
jcsanyi over 10 yearsWhat does this answer provide that is missing in the existing answers that have been here for three years?
-
randominstanceOfLivingThing over 10 yearsempty will not touch the attributes of the selector. If you want to remove the attributes of the selector element, I noticed that the jQuery removeAttr and removeClass are buggy in firefox. So the option I had was to use the remove method and add the container element again then append child nodes to the same.
-
Killroy about 9 yearsWhat about event handlers? I have a weird case where empty+append twice, with different appends causes the second set of appended items to execute the handlers of the first set.
-
undone over 6 years@way too late, but they also remove the handler as well. there is a chance that you had those handlers registered with a function like
live
ordelegate
. -
JonSnow about 5 yearsPerfect summary, this explains it so well! For me even better than the accepted answer.