jQuery empty() vs remove()

53,627

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 .

Share:
53,627

Related videos on Youtube

mabuzer
Author by

mabuzer

Updated on August 18, 2020

Comments

  • mabuzer
    mabuzer over 3 years

    What's the difference between empty() and remove()methods in jQuery, and when we call any of these methods, the objects being created will be destroyed and memory released?

  • jcsanyi
    jcsanyi over 10 years
    What does this answer provide that is missing in the existing answers that have been here for three years?
  • randominstanceOfLivingThing
    randominstanceOfLivingThing over 10 years
    empty 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
    Killroy about 9 years
    What 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
    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 or delegate.
  • JonSnow
    JonSnow about 5 years
    Perfect summary, this explains it so well! For me even better than the accepted answer.