jQuery .unwrap(): Remove a Parent and Keep Its Children

jQuery Reference

.unwrap() removes the selected elements’ immediate parents and moves the parents’ children up one level. The selected elements, their siblings, and other content inside those parents remain.

Syntax and behavior

$(".item").unwrap();
$(".item").unwrap(".group");

With no argument, the method considers the removable direct parents. An optional selector limits removal to parents matching that selector. It does not delete every ancestor at once, and it does not remove body. The return value is the original selection. This differs from moving just one selected child outside its parent.

The official jQuery .unwrap() documentation describes additional call signatures and argument types.

Complete runnable example

Save the following code as a UTF-8 example.html file and open it in a browser. It loads the full jQuery 4.0.0 build from an external URL, so an internet connection is required. The $(function () { ... }) callback waits for the document to be ready before running the example.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery unwrap example</title>
  <style>
    body { margin: 24px; font-family: sans-serif; line-height: 1.6; }
    .marked { background: #fff0b3; border: 2px solid #835b00; }
    .active { color: #a00000; font-weight: bold; }
    button, input, select { font: inherit; }
    #output { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
<div id="container">
  <div class="group marked">
    <p class="item">Selected paragraph</p>
    <p class="other">Another paragraph in the same parent</p>
  </div>
</div>
<button id="unwrap" type="button">Remove parent</button>
  <p id="output" aria-live="polite"></p>
  <script>
    $(function () {
      $("#unwrap").on("click", function () {
        $(".item").unwrap(".group");
        $("#output").text("group count: " + $(".group").length +
          " / Paragraphs in container: " + $("#container > p").length);
      });
    });
  </script>
</body>
</html>

Expected result

Clicking Remove parent removes the group border. Both paragraphs become direct children of container, and the output is group count: 0 / Paragraphs in container: 2. A second click does not remove container because it does not match .group.

Important details and troubleshooting

CSS rules depending on the removed parent’s class or id may stop applying. Check the appearance as well as the DOM structure.
jQuery handlers and data directly attached to the removed parent are lost with it. Keeping the children does not preserve the parent’s behavior.
A parent shared by multiple selected children is removed once. Use the selector argument to avoid accidentally unwrapping a higher-level container on a later call.

Compare the behavior with .wrap() with separate wrappers, .wrapAll() with one shared wrapper.

jQuery Reference

jQuery .addBack(): Include the Previous Traversal Selection

Include the previous traversal collection and understand which elements the optional selector filters.

jQuery .find(): Select Matching Descendants

Search through descendant levels while excluding the container, and compare find with children, filter, and has.

jQuery :button Selector: Which Elements Does It Match?

Check how :button treats button elements, ordinary button inputs, and submit or reset inputs, with a working selection example.

jQuery .addClass(): Add One or More CSS Classes

Add one or more classes while preserving existing names, generate classes with a callback, and check why styling may not change.

jQuery .prepend(): Insert Content as the First Child

Add content at the beginning of an element and understand how existing nodes and multiple destinations affect the result.

jQuery .wrap(): Wrap Each Element Separately

Give each selected element its own wrapper, check the returned selection, and avoid duplicate IDs or repeated nesting.

jQuery .unwrap(): Remove a Parent and Keep Its Children

Remove matching immediate parents while preserving their children, and understand layout, event, and restoration implications.

jQuery :contains(): Match Elements by Text Content

Explore case-sensitive substring matching, descendant text, and a safer way to handle dynamic search strings without constructing selectors.

jQuery .removeClass(): Remove Specific or All Classes

Remove selected class names or clear all classes, while distinguishing class removal from clearing inline styles.

jQuery .after(): Insert Content as the Next Sibling

Insert or move content immediately after a target, and compare after with inside insertion and insertAfter syntax.