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

• <<    DOM Insertion, Around
• Basic & Custom Effects     >>

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

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).

$(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');
    }
  });
});

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>

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

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.

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

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>

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

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.

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

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.

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

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

• <<    DOM Insertion, Around
• Basic & Custom Effects     >>