Terms Privacy

© Rollpie

JavaScript
17 Jan 2026

remove と removeChild で要素を削除する

remove と removeChild は、DOM から要素を削除するメソッドです。新しい remove のほうがシンプルですが、removeChild も使い方を知っておくと便利です。

remove の基本

remove は、要素自身を DOM から削除します。

const element = document.getElementById('target');
element.remove();

これだけで要素が消えます。とてもシンプルです。

removeChild の基本

removeChild は、親要素から子要素を削除します。

const parent = document.getElementById('container');
const child = document.getElementById('target');
parent.removeChild(child);

戻り値は削除した要素なので、後で再利用できます。

const removed = parent.removeChild(child);
// removed を別の場所に追加することも可能

両者の違い

remove

自分自身を削除。親を指定する必要がない。シンプル

removeChild

親から子を削除。戻り値は削除した要素。IE 対応あり

実際に動かしてみよう

HTML
CSS
JavaScript
<ul id="list">
  <li>項目1 <button class="del">削除</button></li>
  <li>項目2 <button class="del">削除</button></li>
  <li>項目3 <button class="del">削除</button></li>
</ul>
#list li {
  padding: 8px;
  margin: 4px;
  background: #f0f0f0;
}
document.getElementById('list').addEventListener('click', function(e) {
  if (e.target.matches('.del')) {
    const li = e.target.closest('li');
    li.remove();
  }
});

すべての子要素を削除する

親要素の中身をすべて消したい場合、いくつかの方法があります。

const parent = document.getElementById('container');

// 方法1: innerHTML を空にする
parent.innerHTML = '';

// 方法2: replaceChildren を使う（引数なし）
parent.replaceChildren();

// 方法3: while ループで順番に削除
while (parent.firstChild) {
  parent.removeChild(parent.firstChild);
}

innerHTML = '' が一番シンプルですが、イベントリスナーがリークする可能性があります。replaceChildren() は新しい API ですが、きれいに削除できます。

削除した要素を別の場所に移動

removeChild の戻り値を使えば、要素を移動させることもできます。

const oldParent = document.getElementById('old');
const newParent = document.getElementById('new');
const child = document.getElementById('target');

const removed = oldParent.removeChild(child);
newParent.appendChild(removed);

ただし実際には、appendChild するだけで自動的に元の場所から削除されるので、明示的な削除は不要です。

7 views