DOM Removal & Replacement JQ Home  <<  JQ Intermediate  <<  DOM Removal & Replacement

In our final look at DOM manipulation we investigate the DOM removal and replacement methods.

The jQuery DOM removal methods allow us to delete content from the DOM.

The jQuery DOM replacement methods allow us to replace content within the DOM.

DOM Removal & Replacement Methods Description
DOM Removal
.detach()Remove the matched set from the DOM.
.empty()Permanantly remove all child nodes of the matched set from the DOM.
.remove()Permanantly remove the matched set from the DOM.
.unwrap()Remove the parents of the matched set from the DOM, leaving the matched set in their place.
DOM Replacement
.replaceAll()Replace the specified target elements with the matched set.
.replaceWith()Replace each element in the matched set with the specified content.

DOM Removal

Delete content from the DOM.

The .detach() Method Top

Remove the matched set from the DOM.

We use this methods only signature .detach( [selector] ) in the examples below.

In the example below when the left button is pressed we detach or reattach all the curry images below.

When the right button is pressed we detach or reattach the 'chicken masala' image.

Tinker with the buttons and notice how the images are reattached due to the 'chicken masala' image being in the jQuery object for the left button (images), or when it has been removed first, to the second jQuery object, for the right button (images2).

a picture of curry a picture of curry a picture of curry

$(function(){
  var images = null;
  var images2 = null;
  $('#btn1').on('click', function() {
    if ( images ) {
         images.prependTo('#div4');
         images = null;
    } else {
         images = $('.curry').detach();
    }
  });
  $('#btn2').on('click', function() {
    if ( images2 ) {
    	images2.prependTo('#div4');
    	images2 = null;
    } else {
    	images2 = $('.curry').detach('#curry2');
    }
  });
});

Press the button below to action the above code:

            

The .empty() Method Top

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

We use this methods only signature .empty() in the example below.

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>

Sayings like A stitch in time saves nine! make sense.


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

Press the button below to action the above code:

The .remove() Method Top

Permanantly remove the matched set from the DOM.

We use this methods only signature .remove( [selector] ) in the examples below.

When the left button is pressed we remove the left image of the chicken pie.

When the right button is pressed we remove the other two images of beef and ale pie using a selector.

a picture of curry a picture of curry a picture of curry

$(function(){
  $('#btn3').on('click', function() {
    console.log($('#chickenpie').remove());
    $('chickenpie').remove();
  });
  $('#btn4').on('click', function() {
    $('img').remove('.beefpie');
  });
});

Press the button below to action the above code:

            

The .unwrap() Method Top

Remove the parents of the matched set from the DOM, leaving the matched set in their place.

We use this methods only signature .unwrap() in the example below.

In the example below when the left button is pressed we wrap the saying below.

When the right button is pressed we unwrap the saying below. The .unwrap() method removes one level of parents at a time from the DOM structure so in our example we need to chain the method three times to remove all three levels we created with the .wrap() method.

If you use .unwrap() first in this example you will actually unwrap the page structure for this page. You will normally want to avoid this but it is left in so you can see the effect.


.content #div4 {
  background-color: silver;
  padding: 10px;
  border: 1px solid black;
}
...
<span id="saying2">He who laughs last, laughs longest!</span>

He who laughs last, laughs longest!


$(function(){
  $('#btn6').on('click', function() {
     $('#saying2').wrap('<div id="div4"><p><strong></strong></p></div>'); 
  });
  $('#btn6a').on('click', function() {
     $('#saying2').unwrap().unwrap().unwrap();
  });
});

Press the button below to action the above code:

            

DOM Replacement

Replace content within the DOM.

The .replaceAll() Method Top

Replace the specified target elements with the matched set.

We use this methods only signature .replaceAll( target ) in the example below.

In the example below when the left button is pressed we replace all 'td' elements.

When the right button is pressed we replace the table row with an id of 'trid1' with the table row with an id of 'trid3. Notice how the table row is moved and not cloned.

Table1 For Testing The .replaceAll( target ) Signature
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2, Table Data 1 Table Row 2, Table Data 2

Table2 For Testing The .replaceAll( target ) Signature
Table Row 1 (id of trid1), Table Data 1 Table Row 1 (id of trid1), Table Data 2
Table Row 2, Table Data 1 Table Row 2, Table Data 2
Table Row 3 (id of trid2), Table Data 1 Table Row 3 (id of trid2), Table Data 2


$(function(){
  $('#btn7').on('click', function() {
    $('new content').replaceAll('.testtable td'); 
  });
  $('#btn8').on('click', function() {
    $('#trid2').replaceAll('#trid1'); 
  });
});

Press the button below to action the above code:

            

The .replaceWith() Method Top

Replace each element in the matched set with the specified content.

We will be using the .replaceWith( newContent ) signature for our example.

The second signature .replaceWith( function() ) executes a function that returns a DOM element(s), HTML string, or jQuery object to replace each element in the matched set with.

Examples of both signatures are available in the reference section.

In the example below when the button is pressed we replace the table row with an id of 'trid3' with new content.

Table1 For Testing The .replaceWith( newContent ) Signature
Table Row 1 (id of trid3), Table Data 1 Table Row 1 (id of trid3), Table Data 2


$(function(){
  $('#btn9').on('click', function() {
    $('#trid3').replaceWith('<tr><td>Replaced content</td><td>Replaced content</td></tr>'); 
  });
});

Press the button below to action the above code:

Lesson 5 Complete

In this lesson we took our final look at DOM manipulation by investigating the DOM removal and replacement methods available in jQuery.

Related Tutorials

jQuery Intermediate - Lesson 2: DOM Insertion, Inside
jQuery Intermediate - Lesson 3: DOM Insertion, Outside
jQuery Intermediate - Lesson 4: DOM Insertion, Around

Reference

Methods

Events - .on() method
Events - .toggle() method
Manipulation - .detach() method
Manipulation - .empty() method
Manipulation - .remove() method
Manipulation - .replaceAll() method
Manipulation - .replaceWith() method
Manipulation - .unwrap() method