DOMから要素を削除する

この章では、DOMから要素を削除する方法について解説します。

DOMから要素を削除する

removeChild() や remove() などのメソッドを使って、要素を動的に削除可能。

RemoveChild()

removeChild() メソッドは、親ノードから指定した子ノードを削除。削除するには、親ノードと子ノードの両方にアクセスする必要あり。

Remove()

remove() メソッドは、親ノードへ明示的にアクセスすることなく、要素を直接削除するためのより簡潔な方法。

実践例：動的なTo-Doリストマネージャー

ユーザーが新しいタスクを追加し、特定の位置にタスクを挿入し、必要に応じてタスクを削除できる動的なTo-Doリストの構築。

新しいタスクの作成と追加:

• createElement() は、ユーザーが新しいタスクを入力した際に、新しい <li> アイテムや <button> 要素を動的に作成するために使用;
• appendChild() は、新しく作成したタスクをリストの末尾に追加し、ユーザーがリストとやり取りするたびにタスクを継続的に追加できるようにする。
  

特定の位置へのタスク挿入: 「タスクを一番上に挿入」ボタンは insertBefore() を使用して、リストの先頭にタスクを追加し、親要素内の正確な位置に要素を配置する方法を示す。

削除機能の追加:

• addRemoveFunctionality() 関数は、各タスクの削除ボタンにイベントリスナーを付与し、ボタンがクリックされたときに各タスクを削除できるようにする;
• この関数は既存のタスクと新しく作成されたタスクの両方に再利用され、すべてのタスクで一貫した動作を保証する。
  

既存要素の処理: 既存のタスクにも削除機能を付与するため、すべての現在の削除ボタンを選択し、ページの読み込み時に必要なイベントリスナーを付与する。