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