生のjavascriptで親要素は削除するけど子要素は残す（jQueryのunwrapっぽく） #JavaScript

あるdivがあって、子要素は残しつつそのdivだけを削除したいというとき、生のjavascriptでどうやるのか意外と情報が見当たらなかったのでメモします。 jQueryのunwrap と同じことを生のjavascriptでやろうという目的です。

準備

前提としてこういうHTMLがあるとして、ボタンをクリックすると div タグは消すけど p タグは残すという処理を、 jQuery の場合と生の javascript の場合とで実装してみます。

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

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

上述のとおり jQuery には unwrap という便利なものがあるのですが、生の javascript にはそういうのはなさそうでしたので、これで代替できそうというのを以下でやってみました。 ES6 で書いています。

jQuery の unwrap() を使う場合

jQuery の場合

// jQuery で用意されている unwrap() を使う
$('#button1').click(() => $('#parent1 p').unwrap());

生の javascript でやるとこんな感じ。

生の javascript で再現

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

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

jsfiddleにサンプル置きましたのでご参考ください。

(19/05/02: 文体等を調整しました。)