jQuery 要素を削除するサンプル(removeとempty)

jQueryの要素を削除するサンプルです。
removeメソッドまたはemptyメソッドを使用します。

目次

removeメソッド

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

サンプル

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

サンプル

サンプル1

サンプル2

コード

上記コードのサンプルです。
16行目は、removeメソッドで29行目以下を削除しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jqueryのremoveのサンプル</title>
<style>
#div1{
	border: 1px solid #000;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
	// ボタン1が押されたときの動作
	$("#btn1").click(function() {
		$("#div1").remove();
		$("#btn2").prop("disabled",false);
	});
	// ボタン2が押されたときの動作
	$("#btn2").click(function() {
		$("#sample1").after('<div id = "div1">サンプル1<p>サンプル2</p></div>');
		$("#btn2").prop("disabled",true);
	});
});
</script>
</head>
<body >
<div id="sample1">サンプル
	<div id="div1">サンプル1
		<p>サンプル2</p>
	</div>
</div>
<input type="button" id="btn1" value="remove">
<input type="button" id="btn2" value="戻す" disabled>
</body>
</html>

emptyメソッド

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

サンプル

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

サンプル

サンプル3

サンプル4

コード

上記サンプルのコードです。
11行目は、emptyメソッドで25行目の子要素と25行目の文字(サンプル3)を削除しています。

<style>
#div3{
	border: 1px solid #000;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
	// ボタン1が押されたときの動作
	$("#btn3").click(function() {
		$("#div3").empty();
		$("#btn4").prop("disabled", false);
	});
	// ボタン2が押されたときの動作
	$("#btn4").click(function() {
		$("#div3").remove();
		$("#sample2").after('<div id = "div3">サンプル3<p>サンプル4</p></div>');
		$("#btn4").prop("disabled",true);
	});
});
</script>

<body >
<div id="sample2">サンプル
	<div id="div3">サンプル3
		<p>サンプル4</p>
	</div>
</div>
<input type="button" id="btn3" value="empty">
<input type="button" id="btn4" value="戻す" disabled>
</body>

関連の記事

jQuery 要素を移動するサンプル(appendTo、prependTo、insertAfter、insertBefore)
jQuery 要素を追加するサンプル(before、after、prepend、append)
jQuery 要素を置き換えるサンプル(replaceWithとreplaceAll)




△上に戻る