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

01. 要素を削除する

要素を削除する(remove)

removeメソッドで要素を削除するサンプルです。

あいうえお

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

<div id="div1">
	<p id="a1">あいうえお</p>
</div>
<input type="button" id="button1" value="削除する">
<input type="button" id="button2" value="戻す">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

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

	$("#button2").click(function() {
		$("#div1").append('<p id = "a1">あいうえお</p>');
		$("#button2").prop("disabled",true);
	});

</script>

11行目は、セレクタで2行目のIDのa1を指定してremoveメソッドで要素を削除しています。

セレクタを変数で指定して要素を削除する

セレクタ(対象を指定する箇所)を変数で指定してremoveメソッドで要素を削除するサンプルです。
動的に対象を指定したい場合に有効です。

あいうえお

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

<div id="div2">
	<p id="a2">あいうえお</p>
</div>
<input type="button" id="button3" value="削除する">
<input type="button" id="button4" value="戻す">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

	$("#button3").click(function() {
		const targetId = "#" + "a" + 2;
		$(targetId).remove();
		$("#button4").prop("disabled",false);
	});

	$("#button4").click(function() {
		$("#div2").append('<p id = "a2">あいうえお</p>');
		$("#button4").prop("disabled",true);
	});

</script>

11行目は、文字列と数値を+で繋げて変数に代入しています。
12行目は、セレクタ$()の部分に変数を指定して2行目の要素をremoveメソッドで削除しています。

以下は、jQueryのremoveメソッドのリンクです。
https://api.jquery.com/remove/