jqueryを使用してdom要素を削除するにはどうすればよいですか?-フロントエンドQ&A-php.cn

jqueryを使用してdom要素を削除するにはどうすればよいですか?

青灯夜游

リリース： 2022-03-23 18:25:27

オリジナル

2231 人が閲覧しました

jquery は次を使用します: 1. Remove() メソッドは、指定された dom 要素とそのすべての内容を削除できます; 2. detach() メソッドは、指定された dom 要素とそのすべての内容を削除できます。イベントは削除されません; 3. empty() メソッドは、指定された子孫 dom 要素を削除できます。

jqueryを使用してdom要素を削除するにはどうすればよいですか?

このチュートリアルの動作環境: Windows7 システム、jquery1.10.2 バージョン、Dell G3 コンピューター。

jQuery では、dom 要素を削除する場合、remove()、detach()、empty() の 3 つのメソッドがあります。

1.remove() メソッド

remove() メソッドは、要素とそのすべての内容を削除できます。

$(selector).remove()

ログイン後にコピー

例:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
	$(function () {
            $("#btn").click(function () {
                $("li:nth-child(4)").remove();
            })
        })
    </script>
	</head>
	<body>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
			<li>jQuery</li>
			<li>Vue.js</li>
		</ul>
		<input id="btn" type="button" value="删除" />
	</body>
</html>

ログイン後にコピー

$("li:nth-child(4)").remove() は、ul の下の 4 番目の子を削除することを意味します。要素 li 要素。 jQuery では、nth-child() と :nth-of-type() の 2 つのセレクターを除き、他のすべてのセレクターまたは jQuery メソッドの添字は 1.0 から始まることに注意してください。

jqueryを使用してdom要素を削除するにはどうすればよいですか?

2. detach() メソッド

jQuery では、detach() とremove() の関数は似ていますが、両方要素とそのすべての内容を削除しますが、この 2 つには明らかな違いがあります。

remove() メソッドは、要素を「完全に」削除するために使用されます。いわゆる「完了」とは、要素が削除されるだけでなく、その要素にバインドされているイベントも削除されることを意味します。
detach() メソッドは、「要素を半完全に削除します。いわゆる「半完全」とは、要素のみが削除され、要素にバインドされているイベントは削除されないことを意味します。

$(selector).detach()

ログイン後にコピー

例:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
	$(function () {
            $("li").click(function () {
                alert("欢迎来到PHP中文网！")
            });
            $("#btn").click(function () {
                var $li = $("li:nth-child(4)").detach();
                $($li).appendTo("ul");
            });
        })
    </script>
	</head>
	<body>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
			<li>jQuery</li>
			<li>Vue.js</li>
		</ul>
		<input id="btn" type="button" value="删除" />
	</body>
</html>

ログイン後にコピー

この例では、各 li 要素にクリックイベントを追加します。いずれかの li 要素をクリックすると、ダイアログフレームがポップアップします。 [削除]ボタンをクリックすると、ul要素の末尾に項目

jQuery

が追加されます。

jqueryを使用してdom要素を削除するにはどうすればよいですか?

##ただし、この時点で、

jQuery

項目を再度クリックすると、以前にバインドされたクリックイベントが存在し、ダイアログボックスが表示されることがわかります。ポップアップします。

jqueryを使用してdom要素を削除するにはどうすればよいですか?

3. empty() メソッド

jQuery では、empty() メソッドを使用して「空にする」ことができます。「何らかの子孫要素。

$(selector).empty()

ログイン後にコピー

例:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(function () {
            $("#btn").click(function () {
                $("ul li:nth-child(4)").empty();
            });
        })
    </script>
	</head>
	<body>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
			<li>jQuery</li>
			<li>Vue.js</li>
		</ul>
		<input id="btn" type="button" value="删除" />
	</body>
</html>

ログイン後にコピー

jqueryを使用してdom要素を削除するにはどうすればよいですか?