jQuery 要素を削除するremoveとemptyの違い

jQueryの要素を削除するremoveメソッドとemptyメソッドの違いのサンプルです。
removeメソッドは、指定した要素とその子要素を削除します。
emptyメソッドは、指定した要素の子ノードを削除します。

removeメソッドで要素を削除する
emptyメソッドで要素の子ノードを削除する

removeメソッドで要素を削除する

ボタンを押すと、removeメソッドで枠線がある要素を削除します。枠線も消えます。

サンプル

サンプル1

サンプル2

コード

上記コードのサンプルです。

<style>
#div1{border: 1px solid #000;}
</style>

<div id="sample1">サンプル
	<div id="div1">サンプル1
		<p>サンプル2</p>
	</div>
</div>
<input type="button" id="button1" value="ボタン1">
<input type="button" id="button2" value="戻す" disabled>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {

	$("#button1").click(function() {
		$("#div1").remove();
		$("#button2").prop("disabled",false);
	});

	$("#button2").click(function() {
		$("#sample1").after('<div id = "div1">サンプル1<p>サンプル2</p></div>');
		$("#button2").prop("disabled",true);
	});
});
</script>

18行目は、removeメソッドで6-8行目を削除しています。7行目の子要素も一緒に削除されます。

removeメソッド

jQueryのremoveメソッドです。
要素を削除します。
以下はjQueryサイトのremoveメソッドのページです。
http://api.jquery.com/remove/

emptyメソッドで要素の子ノードを削除する

ボタンを押すと、emptyメソッドで枠線がある要素の子ノードを削除します。
指定した要素ノードは残るので枠線は削除されません。

サンプル

サンプル3

サンプル4

コード

上記サンプルのコードです。

<style>
#div2{border: 1px solid #000;}
</style>

<div id="sample2">サンプル
	<div id="div2">サンプル3
		<p>サンプル4</p>
	</div>
</div>
<input type="button" id="button3" value="ボタン2">
<input type="button" id="button4" value="戻す" disabled>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {

	$("#button3").click(function() {
		$("#div2").empty();
		$("#button4").prop("disabled", false);
	});

	$("#button4").click(function() {
		$("#div2").remove();
		$("#sample2").after('<div id = "div2">サンプル3<p>サンプル4</p></div>');
		$("#button4").prop("disabled",true);
	});
});
</script>

18行目は、emptyメソッドで6行目の文字の「サンプル3」と7行目を削除しています。
6行目の<div id = "div2">は削除されません。

emptyメソッドは、指定した要素の子ノードを削除するためです。

関係は以下の図のとおりです。

6行目の文字の「サンプル3」は、divタグ(<div id = "div2">)の子ノードです。
種類はテキストノードです。

以下は、削除されたときのイメージ図です。
div2にCSSを指定しているので枠線は残ります。

emptyメソッド

jQueryのemptyメソッドです。
指定した要素の子ノードを削除します。
以下はjQueryサイトのemptyメソッドのページです。
http://api.jquery.com/empty/