.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()

    • This signature does not accept any arguments.

  • version added: 3.0.unwrap( [selector ] )

    • selector
      Type: String
      A selector to check the parent element against. If an element's parent does not match the selector, the element won't be unwrapped.

The .unwrap() method removes the element's parent and returns the unwrapped content. 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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>unwrap demo</title>
  <style>
  div {
    border: 2px solid blue;
  }
  p {
    background: yellow;
    margin: 4px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
</head>
<body>
  <button>wrap/unwrap</button>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<script>
var pTags = $( "p" );
$( "button" ).on( "click", function() {
  if ( pTags.parent().is( "div" ) ) {
    pTags.unwrap();
  } else {
    pTags.wrap( "<div></div>" );
  }
});
</script>
 
</body>
</html>

Demo: