ネイティブ JavaScript の remove メソッド

jQuery には下のような形で指定した要素自体を削除するメソッドが存在しますが、ネイティブの JavaScript ではその要素自体を直接削除することが出来ませんでした。例えば #test 要素を削除するとき、jQuery であれば

$("#test").remove()

というコードで要素の削除が出来ますが、ネイティブの JavaScript で同じことをしたいのであれば

var elemTest = document.getElementById("test");
elemTest.parentNode.removeChild(elemTest);

という形で「一度親に返って子供を削除する。」という方法をとるしかありませんでした。jQuery のように指定した要素そのものを削除するメソッドは存在しなかったのです。

ただ最近、といってもだいぶ前からになりますが、多くのブラウザで要素そのものを削除する remove をネイティブで対応がする動きがあったのでそれの紹介です。

remove

使い方

使い方と言っても大したことは無く、jQuery のように直接削除したい要素にメソッドを指定します。

JavaScript

document.getElementById("test").remove();

簡単ですね。これで #test 要素を削除することが出来ます。メソッド名も完全に同じです。

デモ

デモというほどのデモではありませんが、ネイティブの JavaScript で remove に対応しているブラウザで下にある赤い四角をクリックすると赤い四角が消えます。要素の削除をしています。

remove()

以下のコードで判定しています。赤い四角の id は test です。

JavaScript

document.getElementById("test").addEventListener("click", function() {
    this.remove();
},false)

ブラウザ対応

ネイティブの remove メソッドが実際使えるか使えないかで問題になるのはブラウザの対応です。

ブラウザ最新版での対応状況
GoogleChrome○
Firefox○
Opera○
Safari○
InternetExplorer×
MicrosoftEdge○

の形のようです。基本各ブラウザの最新版で IE 以外は何とかなっているという状況ですね。IE は 11 以降アップデートがありませんので、IE では永遠に使えないという事になります。IE のシェアが減るまでは使いにくいメソッドという事です。

まとめ

いつも通りと言ってはあれですが IE がダメだからという理由で当分は使えないですし、 removeChild を使ったところでそれほど大変ではないので結局使われなさそうなメソッドです。ただ jQuery の良いところをネイティブの JavaScript が吸収している前例が結構あるので、これもその1つなのかもしれません。

親から消すというのは何となく違和感がありますし、より直感的になっていくのは良い事だと思っています。