.unwrap()

Categories: Manipulation > DOM Insertion, Around | Manipulation > DOM Removal

.unwrap() Returns: jQuery

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

version added: 1.4.unwrap()

The .unwrap() method removes the element's parent. This is effectively the inverse of the .wrap() method. The matched elements (and their siblings, if any) replace their parents within the DOM structure.

Example:

Wrap/unwrap a div around each of the paragraphs.

<!DOCTYPE html>
<html>
<head>
  <style>
  div { border: 2px solid blue; }
  p { background:yellow; margin:4px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button>wrap/unwrap</button>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<script>
$("button").toggle(function(){
  $("p").wrap("<div></div>");
}, function(){
  $("p").unwrap();
});</script>

</body>
</html>

Demo:

Support and Contributions

Need help with .unwrap() or have a question about it? Visit the jQuery Forum or the #jquery channel on irc.freenode.net.

Think you've discovered a jQuery bug related to .unwrap()? Report it to the jQuery core team.

Found a problem with this documentation? Report it to the jQuery API team.

http://benalman.com/ "Cowboy" Ben Alman

FYI, If you're interested in how this method came to be, check out
jQuery unwrap: The opposite of .wrap, pretty much
http://www.unleashedmind.com/ sun

uhm, shouldn’t this allow to pass a selector? What if there are multiple parents/wrappers and you only know a wrapping id or class?
http://www.unleashedmind.com/ sun

Just take a real-world example based on the example in the docs above:

<script>
$(“button”).toggle(function(){
$(“p”).wrap(“<div class=”my-wrapper”><div class=”inner”></div></div>”);
}, function(){
// In which case you would want to do:
$(“p”).unwrap('.my-wrapper');
});
</script>

At least based on my gut feeling, I likely wrap elements into multiple containers/elements much more often than I wrap elements with a single element.
AreN

How can there be more than one wrapper?
If you need to remove several parents you might be able to use element.parents(selector) or element.parentsUntil(selector)
http://pandamonia.us/ Alexsander Akers

There should be a way to be able to call unwrap on a wrapper to have it unwrapped (replaced with its contents). This function does the same, but you have to call it on one of the wrapper’s children.

Ideas?
http://hotmeteor.tumblr.com hotmeteor

I think the best solution is:

$('.my-wrapper').replaceWith( $('.my-wrapper').contents() );
nicholas_r

hello. how to use unwrap() to unwrap text& for example i have text wraped with <spen>. something like this:

some text
and i need get this:

some text

i cant use text() function bedouse i cant copy only text and i need change code without copying and inside the DOM.
http://twitter.com/akiross Alessandro Re

I'm not an expert, but why don't use yourWrapper.replaceWith(yourWrapper.html()) ?
http://twitter.com/akiross Alessandro Re

I'm not an expert, but why don't use yourWrapper.replaceWith(yourWrapper.html()) ?

jQuery API