How to Unwrap an Element?

Question

Is there a way of "opening up a div" using JavaScript (remove a parent but keep intact its child nodes)?

What I mean by this is changing this:

To this:

Unfortunately I don't have access to the HTML so I'm thinking I could achieve this result using JavaScript after the webpage has been loaded.

So far I have:

const children = document.querySelectorAll('.child');
children.forEach(child => //not sure what to do next);

user_383904 · Answer

Remove an element but keep its child nodes is commonly known as "unwrap".
There's a pretty handy Element.replaceWith() method:

document.querySelectorAll(".child")
  .forEach(EL => EL.replaceWith(...EL.childNodes));

.child { padding: 5px; background: gold; }
.grandchild { padding: 10px; background:#eee; margin: 5px 0;}

user_295783 · Answer

Try this - vanilla JS. jQuery has an unwrap() but this is simpler

Note innerHTML will lose the event handlers

document.querySelector(".parent").innerHTML = [...document.querySelectorAll(".child")]
  .map(div => div.innerHTML).join("")

user_3897775 · Answer

You can move all the .grandchildren to the .parent:

grandchildren.forEach((grandchild) => parent.appendChild(grandchild));

And then you can remove all the .children:

children.forEach((child) => parent.removeChild(child));

Working Example:

const parent = document.querySelector('.parent');
const children = document.querySelectorAll('.child');
const grandchildren = document.querySelectorAll('.grandchild');

grandchildren.forEach((grandchild) => parent.appendChild(grandchild));
children.forEach((child) => parent.removeChild(child));

user_1021703 · Answer

If using jQuery is an option, it has a unwrap() method for that. I'm not sure how easy that is with pure JS though.

$(".grandchild").unwrap()

.parent {
   border : green solid 2px;
}

.child {
   border : red solid 2px;
}
.grandchild {
   border : yellow solid 2px;
}

How to Unwrap an Element?

4 Answers