ホームページ > 記事 > ウェブフロントエンド > jqueryを使用してdom要素を削除するにはどうすればよいですか?
jqueryを使用してdom要素を削除するにはどうすればよいですか?
- 青灯夜游オリジナル
- 2022-03-23 18:25:272184ブラウズ
jquery は次を使用します: 1. Remove() メソッドは、指定された dom 要素とそのすべての内容を削除できます; 2. detach() メソッドは、指定された dom 要素とそのすべての内容を削除できます。イベントは削除されません; 3. empty() メソッドは、指定された子孫 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 から始まることに注意してください。
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要素の末尾に項目
3. 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 ビデオ チュートリアル 、Web フロント-終わり ＃＃＃】＃＃＃
以上がjqueryを使用してdom要素を削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。