【JavaScript】remove – 基本的な使い方

JavaScriptでは、HTML要素を簡単に削除するためにremove()メソッドを使用します。今回は、このメソッドの基本的な使い方や注意点についてまとめていきたいと思います。

remove()とは？

remove()は、指定した要素をその親要素から削除するためのメソッドです。このメソッドを使うことで、DOMツリーから特定の要素を簡単に取り除くことができます。

特徴

基本構文

element.remove();

基本的な使い方

以下は、ボタンをクリックしたときに特定の要素を削除する例です。

See the Pen remove by tones (@tonescodedesign) on CodePen.

const targetElement = document.getElementById('target');
const removeButton = document.getElementById('removeButton');

removeButton.addEventListener('click', () => {
  targetElement.remove();
  console.log('要素が削除されました。'');
});

<div id="target">削除される要素</div>
<button id="removeButton">削除</button>

複数の要素を削除

クラス名で要素を取得して、一括で削除することも可能です。

See the Pen remove by tones (@tonescodedesign) on CodePen.

const items = document.querySelectorAll('.item');
const removeButton = document.getElementById('removeItems');

removeButton.addEventListener('click', () => {
  items.forEach(item => item.remove());
  console.log('すべての項目が削除されました。');
});

<p class="item">項目1</p>
<p class="item">項目2</p>
<p class="item">項目3</p>
<button id="removeItems">すべて削除</button>

条件付きで削除

属性やクラスを基準にして、特定の要素だけを削除することもできます。

See the Pen Untitled by tones (@tonescodedesign) on CodePen.

const button = document.getElementById('conditionalRemove');

button.addEventListener('click', () => {
  const elements = document.querySelectorAll('[data-remove="yes"]');
  elements.forEach(element => element.remove());
  console.log('条件に一致する要素が削除されました。');
});

<div data-remove="yes">削除される要素</div>
<div>削除されない要素</div>
<button id="conditionalRemove">条件付き削除</button>

使用時の注意点

削除された要素は復元できない

remove()を使用すると、対象の要素は完全にDOMツリーから削除されます。一度削除した要素を復元するには、新たに要素を作成する必要があります。

イベントリスナーも削除される

削除された要素に付与されていたイベントリスナーはすべて失われます。再利用が必要な場合は、要素を削除する前にイベントハンドラを解除しておくとよいでしょう。

アクセシビリティへの配慮

動的に要素を削除する場合、スクリーンリーダーなどの支援技術を考慮して、削除の通知や状態変化を適切に伝える必要があります。

例：削除通知を追加

See the Pen Untitled by tones (@tonescodedesign) on CodePen.

さいごに

remove()は、要素を簡単かつ効率的に削除するための便利なメソッドです。以下の点に注意して使いましょう。