将 HTML 子元素移出父元素并删除父元素

Question

Trying to move children outside of parent then remove the parent itself in vanilla JavaScript. Current code looks something like this:

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

Desired output:

<div class="child"></div>
<div class="child"></div>

Answer 1

Try setting outerHTML property to innerHTML property.

const parent = document.querySelector('.parent')
parent.outerHTML = parent.innerHTML

See live demo:

 console.log('Before change: ', document.querySelector('.container').innerHTML) const parent = document.querySelector('.parent') parent.outerHTML = parent.innerHTML console.log('After change: ', document.querySelector('.container').innerHTML)

 <div class="container"> <div class="parent"> <div class="child"></div> <div class="child"></div> </div> </div>

Answer 2

You can do it as in the @MichałPerłakowski answer using . outerHTML . outerHTML and . innerHTML . innerHTML , which is ok if you are not critical about speed (parsing HTML into DOM nodes) and do not care about attached event listeners, etc.

More efficient and resilient solution would be by juggling with dom elements:

while(parentElement.childNodes.length){
    parentElement.before(parentElement.childNodes[0]);
}
parentElement.remove();