HTML要素.remove() / removeChild()

// 自分自身を削除します。
element.remove();

// 親HTML要素から子要素を削除します。
親要素.removeChild(削除する子要素);

sample_remove.html

<ul id="list">
	<li id="item1">五条悟</li>
	<li id="item2">両面宿儺</li>
	<li id="item3">虎杖悠仁</li>
	<li id="item4">伏黒恵</li>
	<li id="item5">釘崎野薔薇</li>
</ul>
<ul id="active-list">
	<li class="active">呪術高専・一年</li>
	<li class="active">呪術高専・二年</li>
	<li class="inactive">呪いの王</li>
</ul>

sample_remove.js

// パターン1: remove() で自分自身を削除する
var item1 = document.getElementById("item1");
item1.remove(); // 五条悟が削除されます。

// パターン2: removeChild() で子要素を削除する（戻り値を再利用する）
var list = document.getElementById("list");
var item3 = document.getElementById("item3");
var removed = list.removeChild(item3); // 削除したHTML要素が返されます。
console.log(removed.textContent); // 『虎杖悠仁』と出力されます。
list.appendChild(removed); // 削除したHTML要素を末尾に移動します。

// パターン3: 条件に一致する複数のHTML要素をまとめて削除する
var inactiveItems = document.querySelectorAll(".inactive");
inactiveItems.forEach(function(item) {
	item.remove(); // 「呪いの王」が削除されます。
});

// パターン4: 親要素のすべての子要素を削除する
var activeList = document.getElementById("active-list");
while (activeList.firstChild) {
	activeList.removeChild(activeList.firstChild); // 子要素がなくなるまで繰り返します。
}
console.log(activeList.children.length); // 『0』と出力されます。

サンプルページはこちら

上記のコードを実行すると、HTMLは以下のように変化します。

<!-- 実行前 -->
<ul id="list">
	<li id="item1">項目1</li>
	<li id="item2">項目2</li>
	<li id="item3">項目3</li>
</ul>

<!-- item1.remove() 後 -->
<ul id="list">
	<li id="item2">項目2</li>
	<li id="item3">項目3</li>
</ul>

<!-- list.removeChild(item3) 後 -->
<ul id="list">
	<li id="item2">項目2</li>
</ul>

HTML要素をDOMから削除する方法は2つあります。『HTML要素.remove()』は自分自身を削除するメソッドで、親要素を取得する必要がないため簡潔に書けます。『親HTML要素.removeChild()』は親要素から指定した子要素を削除するメソッドで、古くからあるDOM Level 1のメソッドです。

『親HTML要素.removeChild()』は削除したHTML要素を戻り値として返します。この戻り値を変数に保存しておけば、後から『親HTML要素.appendChild()』で別の場所に追加するなど、削除したHTML要素を再利用することが可能です。

どちらのメソッドもDOMから取り除くだけで、メモリ上からは即座に消えません。変数に参照が残っている間はHTML要素のデータが保持されるため、再利用したい場合は変数に保存しておきましょう。単純に削除したいだけであれば『HTML要素.remove()』がおすすめです。