jQuery .unwrap() Method

What You’ll Learn

The .unwrap() method removes the immediate parent of matched elements and leaves those elements in the DOM — the inverse of .wrap(). This tutorial covers syntax since 1.4, optional parent selector since 3.0, comparisons with .wrap(), .remove(), and .unwrapAll(), the official toggle demo, and five practical try-it examples.

Introduction

Markup often accumulates extra wrapper elements — a <div> added for layout, a plugin that wraps inputs, or a CMS that nests content in containers you no longer need. When the wrapper should go but the inner content should stay, jQuery provides .unwrap().

Available since jQuery 1.4, .unwrap() removes the immediate parent of each matched element. The matched nodes (and their siblings within that parent) are promoted up one level in the DOM tree, taking the parent’s place. This is the opposite of .wrap(), which inserts a new parent around matched elements.

Since jQuery 3.0, you can pass an optional selector so unwrap only runs when the parent matches a specific tag or class. Use .remove() when you want to delete the matched elements themselves, not their wrapper. Browse the jQuery DOM hub for related manipulation methods.

Understanding the .unwrap() Method

.unwrap([selector]) locates the immediate parent of each matched element, removes that parent from the DOM, and leaves the parent’s children in its place. The matched elements remain in the document — only the wrapper disappears.

The return value is the same jQuery collection (for chaining). If a parent has multiple children, all siblings inside that parent are promoted together when any one of them triggers unwrap on that parent. Pass an optional selector (jQuery 3.0+) to unwrap only when the parent matches.

📝 Syntax

jQuery .unwrap() supports two forms:

Unwrap immediate parent — since 1.4

.unwrap()

• Removes the immediate parent of each matched element.
• Matched elements and their siblings inside that parent stay in the DOM.

Unwrap with parent selector filter — since 3.0

.unwrap( selector )

• selector — unwrap only if the immediate parent matches this selector.
• If the parent does not match, that element is left wrapped.

Return value

• Returns the same jQuery collection that was unwrapped.
• Chain further manipulation on the promoted elements.

Official wrap/unwrap toggle

The jQuery API documentation demo toggles a div wrapper around paragraphs:

var pTags = $( "p" );
$( "button" ).on( "click", function() {
  if ( pTags.parent().is( "div" ) ) {
    pTags.unwrap();
  } else {
    pTags.wrap( "<div>" );
  }
});

Examples Gallery

Examples 1–5 follow the official jQuery API documentation and common production patterns. Use DevTools or the Try-it links to run each snippet in the browser.

var pTags = $( "p" );
$( "button" ).on( "click", function() {
  if ( pTags.parent().is( "div" ) ) {
    pTags.unwrap();
  } else {
    pTags.wrap( "<div>" );
  }
});

First click → paragraphs wrapped in <div>
Second click → div removed, paragraphs promoted
Third click → wrapped again



.unwrap() is the inverse of .wrap()

// Before: <div class="legacy"><p>Hello</p></div>
$( "p" ).unwrap();
// After:  <p>Hello</p>

<div class="legacy"> removed from DOM
<p>Hello</p> promoted to former parent's location
Paragraph text and attributes unchanged

// Unwrap only when parent has class .removable
$( ".item" ).unwrap( ".removable" );

// Parent <section> is NOT unwrapped — selector does not match
// Parent <div class="removable"> IS unwrapped

.item inside .removable → wrapper stripped
.item inside <section> → left wrapped

Selector checks immediate parent only

$( "#content .card" ).unwrap( ".grid-cell" );

// Before: .grid-cell > .card (nested in layout div)
// After:  .card sits directly under #content

.grid-cell divs removed
.card elements promoted under #content
Cards keep their inner content and click handlers

// unwrap — parent gone, span stays
$( "#a span" ).unwrap();

// remove — span itself deleted
$( "#b span" ).remove();

#a: div wrapper removed, span text remains
#b: span deleted entirely from DOM

unwrap targets parent; remove targets matched element

🚀 Common Use Cases

• Plugin cleanup — remove wrapper divs added by legacy jQuery plugins around inputs or images.
• Layout refactors — strip grid or flex wrapper cells after simplifying CSS structure.
• CMS export cleanup — unwrap unnecessary nested divs from pasted rich-text HTML.
• Toggle editing modes — wrap content for preview, unwrap for plain editing (pair with .wrap()).
• Selective unwrap — .unwrap(".disposable") removes only marked wrapper classes.
• Semantic HTML fixes — promote headings or lists out of non-semantic wrapper divs.

📝 Notes

• Available since jQuery 1.4 — optional parent selector added in jQuery 3.0.
• Removes only the immediate parent, not grandparents (use .unwrapAll() for that).
• Inverse of .wrap() — the official demo toggles both methods.
• Siblings inside the removed parent are promoted together with matched elements.
• Cannot unwrap if the matched element is already at the document root (no parent).
• Do not confuse with .remove(), which deletes matched elements themselves.
• Parent event handlers are removed with the parent; handlers on matched children survive.

💡 Best Practices