Unwrap with native javascript

HTML

<!-- jQueryの実験用 -->
<button id="button1">ボタン</button>
<div id="parent1">
  <p>child</p>
</div>

<hr>

<!-- 生のjavascriptの実験用 -->
<button id="button2">ボタン</button>
<div id="parent2">
  <p>child</p>
</div>

CSS

div {
  border: 2px solid black;
  background: #ccc;
  margin: 10px 0;
  padding: 10px;
}

p {
  margin: 0;
}

hr {
  margin: 50px 0;
}

JavaScript

//jQueryでunwrapする

$('#button1').click(() => $('#parent1 p').unwrap());


//生のjavascriptでunwrapする

/**
 * 指定したDOMは削除するけど、子要素は残しておく関数。
 * jQueryのunwrapと同等の処理をおこないます。
 * @param {object} 対象のDOMオブジェクト
 */
const unwrap = target => {
  while(target.firstChild) {
    target.parentNode.insertBefore(target.firstChild, target);
  }
  target.remove();
};

//使用例: ボタンをクリックしたらunwrapを実行します。
document.querySelector('#button2').onclick = () =>
  unwrap(document.querySelector('#parent2'));