JavaScriptでDOM要素を削除・非表示にする2つの方法

JavaScriptを使って、DOMから要素を素早く削除または非表示にする2つの方法をわかりやすく解説します。

まず判断しよう:「後で再表示が必要か?」

JavaScriptでDOMから要素を取り除く方法は、主に2つあります。どちらを選ぶかは、次の質問への答えによって決まります。「この要素を、後でもう一度表示する必要があるか?」

答えが「はい」の場合は、要素を物理的に削除せず、styleプロパティを使って非表示にするのが適切です。

方法1: styleプロパティで要素を非表示にする

const hideElement = document.querySelector('#element-to-hide')
hideElement.style.display = 'none'

display: noneを設定すると、要素は画面上から消えますが、DOM内には残っているため、後からdisplay: ''や'block'などを指定すれば簡単に再表示できます。

方法2: removeChild()で要素を完全に削除する

逆に、その要素を二度と使う必要がないのであれば、親ノードから子ノードを削除する次の方法を使いましょう。

const removeElement = document.querySelector('#element-to-remove')
removeElement.parentNode.removeChild(removeElement)

なお、近年のブラウザではよりシンプルなelement.remove()メソッドも利用できます。こちらなら親ノードを意識せず、対象の要素を直接削除できます。

document.querySelector('#element-to-remove').remove()

querySelector()のセレクタ記法に注意

querySelector()で要素を取得する際は、セレクタの書き方に注意が必要です。ID属性を持つ要素を指定するときは先頭に#を、クラス名を指定するときは.を付けます。この記法を間違えると要素が取得できず、エラーや意図しない動作の原因になるため注意しましょう。