How can I remove wrapper (parent element) without removing the child?

javascript jquery html dom dom-manipulation

lipenco · Oct 9, 2013 · Viewed 20k times · Source

I would like to remove the parent without removing the child - is this possible?

HTML structure:

<div class="wrapper">
  <img src"">
</div>
<div class="button">Remove wrapper</div>

After clicking on the button I would like to have:

<img src"">
<div class="button">Remove wrapper</div>

Answer

Pure JS (ES6) solution, in my opinion easier to read than jQuery-solutions.

function unwrap(node) {
    node.replaceWith(...node.childNodes);
}

node has to be an ElementNode