removeChildとは異なり、removeは自分自身を動的に削除できるメソッドです。

使い方は取得した要素に生えてるremoveメソッドを実行すればOKですね。楽ちんです。

{削除したい要素}.remove()

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

See the Pen removeメソッドで自身の要素を削除する by Makoto Ohnami (@zohnami) on CodePen.

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

「押したら消えるボタン」ボタンを押すとそのボタンがそのまま消えるようにしたいと思います。

自分自身を削除するのですね。

<button class="remove_button">押したら消えるボタン</button>

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

removeChildと比べるとこちらもシンプルですね。

removeButtonのaddEventListenerでクリックイベントを設定して、その中でremoveメソッドを実行しています。

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

removeButton.addEventListener('click', () => {
  removeButton.remove();
});

消したい要素をコードの中で直接指定できるときは、removeを使う方が簡単かなと思います。

一方、なんらかの理由で親要素から間接的に指定しないと削除したい要素を取得できないときはremoveChildを使う、といったように使い分けることになるでしょう。

この記事の環境情報

  • Google Chrome 108.0.5359.124