remove parent div leaving its child div

Question

I have child div inside its parent.

How to remove parent div leaving only its child untouched?

I don't use jQuery.

<div id="parent">
    <div id="child">
    </div>
</div>

to become

<div id="child"></div>

Answer 1

Get the element, get its parentNode, replace it with the child.

 var child = document.getElementById('child'); child.parentNode.replaceWith(child); 

 <div id="parent"> <div id="child"> A </div> </div> 

If you have support issues with replaceWith you can try the insertBefore approach.

 var child = document.getElementById('child'); var parent = child.parentNode; parent.parentNode.insertBefore(child, parent); parent.parentNode.removeChild(parent); 

 <div id="parent"> <div id="child"> A </div> </div>