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>

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>

• javascript
• html
• dom

• lol currently code looks like this...there is no code..its your html. – JonH Commented Aug 23, 2016 at 20:20
• Last I remember, HTML is code. I recreated a simplified version of what I have because I want to understand how to approach a situation like this. – Ao C Commented Aug 23, 2016 at 20:23
• Right ... but you said it as if you attempted some sort of client side code...you haven't attempted anything you posted static html. – JonH Commented Aug 23, 2016 at 20:24
• 1 I have attempted this in multiple ways in console and I got this to work prior to asking, but wanted a better approach. Is it now obligatory to post all scratch work? I'm trying to learn something I don't understand, posting my scrap work would make this an unnecessarily long post. – Ao C Commented Aug 23, 2016 at 20:33

2 Answers 2

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>

You can do it as in the @MichałPerłakowski answer using . outerHTML and . 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();