Introduction to jQuery unwrap()

unwrap() is a purpose to remove the wrapper or parent element from a given element. jQuery unwrap() method is used to remove the parents of the selected HTML/DOM elements. This method returns the unwrapped content after it gets executed. The selected elements along with any sibling replace their parents in the DOM structure. One simple example would be, removing the anchor tag around a text. unwrap() method simply removes the anchor tag keeping the inner text content intact. wrap() method does the opposite of what unwrap() does.

Syntax:

$(selector).unwrap()

where,

selector is the selected element.

This syntax does not accept any arguments.

Note: unwrapping will not occur if the selector and parent do not match.

Examples to Implement jQuery unwrap() method

Let us now check out few examples to understand the implementation and working of unwrap() method better.

Example #1

Below is a simple example which illustrates the effect of unwrap() method in jQuery

Code:

<!DOCTYPE html>
<html>
<head>
<title>Example for jQuery unwrap method</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").unwrap();
});
});
</script>
<style>
button {
background: teal;
color: yellow;
border-radius: 30px;
padding: 15px;
font-weight: bold;
border: none;
margin: auto;
cursor: pointer;
}
div {
width: 450px;
height: 300px;
padding: 20px;
font-size: medium;
color: maroon;
text-align: center;
background-color: lightgray;
margin: auto;
font-weight: bold;
border: 3px solid teal;
margin-top: 50px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div>
<h2>unwrap() method</h2>
<br />
<p>unwrap() method removes the wrapper around a selected element.</p>
<br />
<button>click to unwrap</button>
</div>
</body>
</html>

Output:

The below screenshot shows the screen when the page is initially loaded in the browser.
No activity has been performed till now.
Here, we have a div wrapping up some texts and a button as shown below.
We are trying to unwrap the p element’s parent, that is, div.

Once the button is clicked, the parent element of the selected paragraph p, that is, div is removed leaving behind the entire content wrapped within intact.
As shown below, all the formatting provided by div has been removed as soon as the button is clicked.

Example #2

Here is another example illustrating the working of unwrap() method.

Code:

<!DOCTYPE html>
<html>
<head>
<title>Example for jQuery unwrap method</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").unwrap();
});
});
</script>
<style>
button {
background: teal;
color: yellow;
border-radius: 30px;
padding: 15px;
font-weight: bold;
border: none;
margin: auto;
cursor: pointer;
}
#div1 {
background-color: lightgray;
}
#div2 {
background-color: yellowgreen;
}
</style>
</head>
<body>
<div id="div1" >
<p>This is the first paragraph.</p>
</div>
<div id="div2" >
<p>This is the second paragraph.</p>
</div>
<button>click to unwrap</button>
</div>
</body>
</html>

Output:

Below is the screenshot captured when the page is initially loaded in the browser.
No activity has been performed till now.
Here, we have two div with ids div1. We are trying to remove the parent of the p element by applying unwrap() method on the p element.

Once the button is clicked, the wrapper or parent of the p element is removed.
The parent of both the two paragraphs is the div element.
Thus, the formatting provided by the div element is completely removed from both paragraphs.

Example #3

Let us consider one more example to see the working of the unwrap() method.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery unwrap() method example</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p")
.find("a.link")
.contents()
.unwrap();
});
});
</script>
<style>
div {
width: 450px;
height: 200px;
padding: 20px;
font-size: medium;
text-align: center;
margin: auto;
background-color: lightgrey;
font-weight: bold;
border: 3px solid teal;
margin-top: 50px;
margin-bottom: 10px;
}
button {
background: teal;
color: yellow;
border-radius: 30px;
padding: 15px;
font-weight: bold;
border: none;
margin: auto;
cursor: pointer;
}
p {
color: brown;
font-weight: bold;
font-size: larger;
border: none;
margin: auto;
cursor: pointer;
}
</style>
</head>
<body>
<div>
<p>
If you click the following button it will remove the anchor tag from
<a href="#" class="link">this link</a> but will keep the text content in
place.
</p>
<br /><br />
<button type="button">Click Here To Remove Link</button>
</div>
</body>
</html>

Output:

The above code snippet when run gives the following output.
Here, we are trying to remove the anchor tag from the selected link.

Once the button is clicked, the unwrap() method removes the parent of the selected link, which is anchor tag keeping the text as it is.

Example #4

Let us now look at an example to understand the difference between wrap() and unwrap() method. Here, we are illustrating the toggling between wrapping and unwrapping an element.

Code:

<!DOCTYPE html>
<html>
<head>
<title>Example for jQuery wrap & unwrap method</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$("#btn1").click(function() {
$("p").wrap("<div></div>");
});
$("#btn2").click(function() {
$("p").unwrap();
});
});
</script>
<style>
#btn1 {
background: teal;
color: yellow;
border-radius: 30px;
padding: 15px;
font-weight: bold;
border: none;
margin: auto;
cursor: pointer;
}
#btn2 {
background: teal;
color: yellow;
border-radius: 30px;
padding: 15px;
font-weight: bold;
border: none;
margin: auto;
cursor: pointer;
}
div {
background-color: yellow;
}
</style>
</head>
<body>
<h2>wrap() and unwrap()</h2>
<p>
wrap() method wraps up a particular element around an another element.
</p>
<p>unwrap() method removes the wrapper of the selected element.</p>
<br />
<button id="btn1">Wrap</button>
<button id="btn2">Unwrap</button>
</body>
</html>

Output:

The above code snippet when executed shows the following output.
Here, we are trying to wrap and then unwrap the two paragraphs shown below.

Once the Wrap button is clicked, the selected paragraphs get wrapped by a div as specified in the code.

On clicking the Unwrap button, the wrapper of the selected paragraphs, that is, div gets removed.

Conclusion

This jQuery article demonstrated how the unwrap() method basically works and its implementation. This method removes the wrapper or parent of the set of matched elements from the DOM leaving the element’s content in place. To wrap a specified HTML/DOM structure around a selected element, the wrap() method is used on that element.

Quiz Result
Total Questions	Correct Answers	Wrong Answers	Percentage

Introduction to jQuery unwrap()

Examples to Implement jQuery unwrap() method

Example #1

Example #2

Example #3

Example #4

Conclusion

Recommended Articles

Follow us!

APPS

Blog

Courses

Email