要素を追加できる一方で、削除も可能です。

removeChildを使うと、指定した要素を動的に削除することができます。

サンプルコードは以下です。

See the Pen 子要素をremoveChildで動的に削除する by Makoto Ohnami (@zohnami) on CodePen.

まずはhtmlを見てみましょう。

「削除」ボタンを押すと「もともとあるbox」と書かれているdivタグを削除できるようにしていきます。

<button class="remove_button">削除</button>

<div class="container">
    <div class="box">
        もともとあるbox
    </div>
</div>

次はjavascriptを見てみましょう。

以下のようにquerySelector('.remove_button')を実行してボタンの要素を取得。

取得したボタンにクリックイベントを設定していきます。

削除したい要素をdocument.querySelector('.box')で取得、親要素をdocument.querySelector('.container')で取得しておきます。

あとは親要素のcontainerからremoveChildを指定して実行すればOKですね。

引数には削除したい要素(removeItem)を設定して実行します。

const removeButton = document.querySelector('.remove_button');

removeButton.addEventListener('click', () => {
  const container = document.querySelector('.container');
  const removeItem = document.querySelector('.box')
  container.removeChild(removeItem);
});

削除したい要素を取得しないといけないところがちょっと面倒にも感じますが、慣れの問題かなとも思います。

appendChildのときと同様ですが、画面から削除されただけでバックエンドのデータベースと連携したい場合は別途コードを追加していく必要があります。

この記事の環境情報

  • Google Chrome 108.0.5359.124