.unwrap()

DOM removal.

Description JQ Home  <<  Manipulation  <<  .unwrap()

• <<    .remove()
• .replaceAll()     >>

The .unwrap() method is used to remove the parents of the matched set from the DOM structure, leaving the matched set in their place. Any siblings of the matched set will also be moved.

Syntax

Parameters

None.

Return

A jQuery object containing the matched set before the call to the .unwrap() method.

.unwrap() Example  Manip.  <<  Top

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

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

Related Tutorials

jQuery Intermediate Tutorials - Lesson 5 - DOM Removal & Replacement

• <<    .remove()
• .replaceAll()     >>