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

jQueryの要素を削除するサンプルです。

目次

要素を削除する(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/1.12.4/jquery.min.js"></script>
<script>
$(function() {

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

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

12行目は、セレクタで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/1.12.4/jquery.min.js"></script>
<script>
$(function() {

	$("#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>

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

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

関連の記事

jQuery 要素を追加する(before/after/prepend/append)
jQuery DOM操作で要素を移動する(prev/next他)
jQuery 要素を削除するremoveとemptyの違い
jQuery 要素を移動する(appendTo/prependTo/insertAfter/insertBefore)

△上に戻る