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>