ES6 JavaScriptでDOMから要素を簡単に削除する方法

ES6（ECMAScript 2015）のJavaScriptを使えば、DOMから要素を削除するのはとても簡単です。特別なライブラリや複雑な処理は不要で、削除したい要素に対して remove() メソッドを呼び出すだけです。

remove() メソッドの基本的な使い方

まず querySelector() で対象の要素を取得し、その要素に remove() を実行します。

let element = document.querySelector("element-to-remove")
element.remove()

この2行のコードだけで、指定した要素がDOMから完全に取り除かれます。

具体例：h1要素を削除する

たとえば、Webページから h1 要素（見出し）を削除したい場合は、次のように書きます。

let headingOne = document.querySelector("h1")
headingOne.remove()

このコードを実行すると、ページ内の最初の h1 要素が画面上から消えます。ボタンのクリックイベントなどと組み合わせれば、ユーザーの操作に応じて動的に要素を削除することも可能です。

ブラウザ対応状況

remove() メソッドは、Chrome、Firefox、Safari、Edgeなどすべてのモダンブラウザでサポートされています。

一方で、Internet Explorer（IE11を含むすべてのバージョン）では利用できません。IEへの対応が必要なレガシー環境では、代わりに次のように親ノード経由で子要素を削除する方法を使いましょう。

element.parentNode.removeChild(element)

現在ではInternet Explorerのサポートは終了しているため、ほとんどのケースで remove() を安心して使用できます。

参照元：Caniuse.com