JavaScriptで要素を削除する

JavaScriptで要素を削除する方法をいくつか試してみます。

サンプルコード

ボタンクリックで要素を削除する形で試してみます。

<ul class="list">
	<li class="list01">list01</li>
	<li class="list02">list02</li>
	<li class="list03">list03</li>
</ul>
<button id="btn">削除</button>

要素の削除はremoveChild()で行えます。
削除要素の親要素.removeChild(削除要素) の形で指定します。

document.getElementById('btn').addEventListener('click', function() {
	var parent = document.querySelector('.list');
	var target = document.querySelector('.list02');
	parent.removeChild(target);
});

要素を削除するデモページ1

removeChild()は削除する要素とその親要素の指定が必要ですが、parentNodeを使えば削除する要素のみで削除できます。

document.getElementById('btn').addEventListener('click', function() {
	var target = document.querySelector('.list02');
	target.parentNode.removeChild(target);
});

要素を削除するデモページ2

remove()の場合は削除する要素の指定のみで削除が行えます。

document.getElementById('btn').addEventListener('click', function() {
	var target = document.querySelector('.list02');
	target.remove();
});

ただし、IEは非対応なので注意が必要です。
要素を削除するデモページ3

指定した要素の子要素をすべて削除したい場合、removeChild()を使って以下のような形で実装できます。

document.getElementById('btn').addEventListener('click', function() {
	var target = document.querySelector('.list');
	while(target.firstChild) {
		target.removeChild(target.firstChild);
	}
});

要素を削除するデモページ4