jQueryで要素を削除する

jQueryで要素を削除する方法をメモ。

サンプルコード

.box-a > .box-b > .box-cの順で入れ子にします。

HTML

<div class="box-a">
	<div class="box-b">
		<div class="box-c">
		</div>
	</div>
</div>

CSS

.box-a {
	width: 400px;
	height: 400px;
	background: red;
}
.box-b {
	width: 300px;
	height: 300px;
	background: blue;
}
.box-c {
	width: 200px;
	height: 200px;
	background: green;
}

要素の削除を行っていない場合は以下のように表示されます。
要素を削除する前のデモページ
この状態で、.box-bに対して要素の削除方法をいくつか試してみます。
　

remove()

remove()は指定した要素を削除します。

JavaScript

$(function() {
	$('.box-b').remove();
});

.box-bと.box-cが削除されました。
remove()のデモページ
　

empty()

empty()は指定した要素の子要素を削除します。

JavaScript

$(function() {
	$('.box-b').empty();
});

.box-cが削除されました。
empty()のデモページ
　

unwrap()

unwrap()は指定した要素の親要素を削除します。

JavaScript

$(function() {
	$('.box-b').unwrap();
});

.box-aが削除されました。
unwrap()のデモページ
　

【参考サイト】

• jQueryで要素を削除するいくつかの方法〜remove,empty,unwrap