unwrap

by Artem

HTML

<div id="container">
  <div id="parent">
    <div id="child1">1</div>
    <div id="child2">2</div>
  </div>
</div>

<button type="button" id="btn">Unwrap child1</button>

CSS

#parent {
  padding: 10px 15px;
  border: 1px solid #ccc;
}

JavaScript

'use strict';

function unwrap(el) {
  const parent = el.parentElement;
  const fragment = document.createDocumentFragment();

  while (parent.firstChild) {
    fragment.append(parent.firstChild);
  }

  parent.replaceWith(fragment);
}

btn.onclick = function() {
	unwrap(child1);
};