HTML要素.remove() / removeChild()

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

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

<ul id="list">
	<li id="item1">項目1</li>
	<li id="item2">項目2</li>
	<li id="item3">項目3</li>
</ul>

// remove() で自分自身を削除します。
var item1 = document.querySelector("#item1");
item1.remove();

// removeChild() で子要素を削除します。
var list = document.querySelector("#list");
var item3 = document.querySelector("#item3");
list.removeChild(item3);

上記のコードを実行すると、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()』がおすすめです。