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

Question

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 1

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

node.replaceWith(...node.childNodes)

Node has to be an ElementNode

const wrapperNode = document.querySelector('h1')
wrapperNode.replaceWith(...wrapperNode.childNodes)

<h1>
  <a>1</a>
  <b>2</b>
  <em>3</em>
</h1>