Home »
jQuery »
jQuery DOM Manipulation Methods
jQuery unwrap() Method
jQuery | unwrap() Method: Learn about the jQuery unwrap() Method with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on October 18, 2022
unwrap() Method
Unwrapping something is the process of removing the cover or the thing that is surrounded it. Therefore, unlike wrapping, unwrapping is to take off the content around the selected thing. Hence, the unwrap() method of jQuery does a similar task, i.e., to remove the content that is present for an element. It basically removes the parent element of the selected HTML component.
unwrap() Method Syntax
$('selector').unwrap();
This method does not take any parameters. We only have to provide the element from which the parent element has to be removed. It matched all the elements with the selector and removes all their parent elements. Once executed, it returns the element with no parent element of its. Hence, this method is very useful when the child elements have to be cleared with their respective parent elements all in one go.
The following example shows the implementation of the unwrap() method precisely. When the user clicks the button, it unwraps the selected element from its parent element.
jQuery unwrap() Method Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<h2>jQuery - Unwrap</h2>
<p>Click the following button to unwrap the elements with some content.</p>
<button>unwrap</button>
<hr>
<div style="color: teal; font-size: x-large;">
<h3>Hey Everybody !!!</h3>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
$('h3').unwrap();
})
});
</script>
</html>
Output:
