jQuery unwrap() Method

Last Updated:

jQuery unwrap() Method

The jQuery unwrap() method removes the parent element of the selected elements.

Note: This is effectively the inverse of the wrap() method.

The following example will unwrap all <p> tags.

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style> div, article{ width: 200px; height: 100px; background: yellow; border: 1px solid red; margin: 10px; } </style> </head> <body> <h1>jQuery unwrap() Method</h1> <div> <p>Paragraph inside div</p> </div> <article> <p>Paragraph inside article.</p> </article> <button>unwrap all</button> <script> $(document).ready(function(){ $("button").click(function(){ $("p").unwrap(); }); }); </script> </body> </html>

Syntax

$(selector).unwrap(); // or $(selector).unwrap(selector1);

Parameter Values

Value Type Explanation
selector1 Optional Specifies a selector to check the parent element against.

Browser Support

Devicedesktopmobile
Browsergoogle chromesafarifirefoxinternet Exploreredgeoperagoogle chromesafarifirefoxedgeoperaandroid webviewsamsung internet
unwrap()YesYesYesYesYesYesYesYesYesYesYesYesYes

unwrap Specific

In the following example, we will unwrap all <p> tags only inside <div> tag.

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style> div, article{ width: 200px; height: 100px; background: yellow; border: 1px solid red; margin: 10px; } </style> </head> <body> <h1>jQuery unwrap() Method</h1> <div> <p>Paragraph inside div</p> </div> <article> <p>Paragraph inside article.</p> </article> <button>unwrap div only</button> <script> $(document).ready(function(){ $("button").click(function(){ $("p").unwrap("div"); }); }); </script> </body> </html>

Share this Page

Meet the Author