.empty()

Categories: Manipulation > DOM Removal

.empty() Returns: jQuery

Description: Remove all child nodes of the set of matched elements from the DOM.

version added: 1.0.empty()

This method removes not only child (and other descendant) elements, but also any text within the set of matched elements. This is because, according to the DOM specification, any string of text within an element is considered a child node of that element. Consider the following HTML:

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

We can target any element for removal:

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

This will result in a DOM structure with the Hello text deleted:

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

If we had any number of nested elements inside <div class="hello">, they would be removed, too.

To avoid memory leaks, jQuery removes other constructs such as data and event handlers from the child elements before removing the elements themselves.

Example:

Removes all child nodes (including text nodes) from all paragraphs

<!DOCTYPE html>
<html>
<head>
  <style>
  p { background:yellow; }
</style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
	<p>
  Hello, <span>Person</span> <a href="javascript:;">and person</a>
</p>

<button>Call empty() on above paragraph</button>
<script>
  $("button").click(function () {
    $("p").empty();
  });
</script>

</body>
</html>

Demo:

Comments

Support requests, bug reports, and off-topic comments will be deleted without warning.
Please do post corrections or additional examples for .empty() below. We aim to quickly move corrections into the documentation.
If you need help, post at the forums or in the #jquery IRC channel.
Report bugs on the bug tracker or the jQuery Forum.
Discussions about the API specifically should be addressed in the Developing jQuery Core forum.

Friend_shelly

does the removed element still exists in the viewSource of the page??
Tobias

empty() removes all data and event handlers from the removed elements. If you want to remove elements without destroying your data or event handlers (so that you can reinsert them later), use detach()
korzhy

Yes, sorry, my inattention. I mean in case <div class="hello"> has event handler, $('.hello').empty() won't remove it.</div>
korzhy

This is not true about event handlers: "Other jQuery constructs such as data or event handlers are erased as well."
Karl Swedberg

Sure it's true. Admittedly, It's a little ambiguous about which elements have the data and event handlers removed. The child elements have these constructs removed before the actual elements are removed to prevent memory leaks.

jQuery API