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 するだけで自動的に元の場所から削除されるので、明示的な削除は不要です。
