CODEWITHSUNDEEP
javascriptjquerydom-manipulation
mabuzer
mabuzer

Reputation: 6717

jQuery empty() vs remove()

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?

Upvotes: 104

Views: 56901

Answers (3)

nickf
nickf

Reputation: 546323

  • 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:

Upvotes: 166

user1452840
user1452840

Reputation: 221

$("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 .

Upvotes: 2

Darin Dimitrov
Darin Dimitrov

Reputation: 1039298

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.

Upvotes: 56

Related Questions