.remove()

JavaScriptの.remove()で要素の削除

JavaScript

.remove() を使うことで要素の削除が可能です。ここでは、JavaScriptの.remove() を使ったサンプルと合わせて解説します。

.remove()を使ったサンプル

まずはじめに、.remove() で要素の削除を行うサンプルです。このサンプルでは、ボタンをクリックして要素を削除してみます。

以下の idが#deleteBtn1のボタン を選択すると、その上部の ボタンで削除される要素 を削除されます。

ボタンで削除される要素

.remove()を使ったコード

それでは、上記サンプルのHTMLを見てみましょう。

<p id="deleteconpo">ボタンで削除される要素</p>
<button id="deleteBtn1">idが#deleteBtn1のボタン</button>

このように、HTMLでは p タグと button タグのシンプルな構成です。

そして、以下が対象のJavaScriptです。

document.querySelector('#deleteBtn1').addEventListener('click', () => {    
  const element = document.getElementById('deleteconpo');    
  element.remove();   
});

順に使われている語句を説明していくと、まずquerySelectordeleteBtn1 を、addEventListener でクリック条件を設定します。

次に、const element で、対象のidを指定するgetElementById の関数宣言をして、最後に.remove() で要素の削除を行います。

.querySelector()

querySelector() は、指定されたセレクターまたはセレクターのグループに一致する、文書内の最初の Element を返します。

上記のようなdocument.querySelector('#deleteBtn1') の場合、id属性「#deleteBtn1」を持つHTML要素(ボタン)を返しています。