.empty() JQ Home  <<  Manipulation  <<  .empty()

• <<    .detach()
• .remove()     >>

DOM removal.

Description

The .empty() method is used to permanantly remove all child nodes of the matched set from the DOM. This includes any text or strings within the element in question.

• The .empty() method completely removes all child nodes, their bound events and jQuery data associated with them.
• Use the .detach() method if you want to retain all bound events and jQuery data associated with the detached elements, so they can be reinserted into the DOM at a later time if required.
• Use the .remove() method completely removes the elements, all bound events and jQuery data associated with them.

Syntax

Parameters

None.

Return

A jQuery object containing the emptied matched set.

.empty() Example  Manip.  <<  Top

Permanantly remove all child nodes of the matched set from the DOM.

When the button is pressed we remove all child nodes from the 'p' element. Notice how the text within the 'p' element is also removed. According to the DOM specification, any string of text within an element is considered a child node of that element, so jQuery removes them for this reason.

.content #div3 {
  background-color: yellow;
  padding: 10px;
  border: 1px solid black;
}
...
<div3><p>Sayings like <i id="saying">A stitch in time saves nine!</i> make sense.</p></div>

$(function(){
  $('#btn5').on('click', function() {
    $('#div3 p').empty();
  });
});

Related Tutorials

jQuery Intermediate Tutorials - Lesson 5 - DOM Removal & Replacement

• <<    .detach()
• .remove()     >>