DOMおれおれAdvent Calendar 2015 – 06日目

2015-12-06

jQueryだと要素を削除するとき $el.remove() と書けるんだけど、DOMだとこんな書き方になります。

var parent = el.parentNode;
parent.removeChild(el);

「目的の要素を親要素から削除する」じゃなくて「目的の要素から子要素を削除する」というAPIになってます。まあこれはこれでありかな。

既に削除済みでドキュメントツリーに所属していない場合、 el.parentNode は null になります。（だから一行で el.parentNode.removeChild(el) と書くとエラーになる。）　汎用的にやるならそこで判定して、親がなければ何もしないようにした方が良いでしょう。

環境

古いIEも含めて一通り使えます。

remove() もあるにはある

Living Standardの方には書いてあります。IEは未対応、MS Edgeだと対応してるみたい。iOS Safariは未対応だそうです。

おまけ: replaceChild()

あの要素を削除して代わりにこっちの要素を～てな場面では replaceChild(elNew, elTarget) というのもあります。

var elNew = document.createElement('div');
elNew.appendChild(document.createTextNode('NEW!'));  // => <div>NEW!</div>
var elTarget = document.body.firstChild;
var elParent = document.body;

elParent.replaceChild(elNew, elTarget);

地味に大昔のIEからでも使えるみたいです。（エミュレーターの5でも動いた。）

参考