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

jQueryの要素を削除する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)と6行目の子要素(7行目)を削除しています。
6行目の文字(サンプル3)は、div2があるdivタグの子ノードです。種類はテキストノードです。

以下は、削除されたときのイメージ図です。
属性ノードは子ノードではないので削除されません。そのためCSSの枠線は反映されたままです。

emptyメソッド

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

関連の記事

jQuery 要素を移動する(appendTo/prependTo/insertAfter/insertBefore)
jQuery 要素を追加する(before/after/prepend/append)
jQuery 要素を置き換える(replaceWith/replaceAll)

プログラムでつまったらteratailに登録して質問しましょう!↓↓↓

△上に戻る