.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();
});順に使われている語句を説明していくと、まずquerySelector で deleteBtn1 を、addEventListener でクリック条件を設定します。
次に、const element で、対象のidを指定するgetElementById の関数宣言をして、最後に.remove() で要素の削除を行います。
.querySelector()
querySelector() は、指定されたセレクターまたはセレクターのグループに一致する、文書内の最初の Element を返します。
上記のようなdocument.querySelector('#deleteBtn1') の場合、id属性「#deleteBtn1」を持つHTML要素（ボタン）を返しています。
