ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery による HTML 要素の削除またはクリア example_jquery

jQuery による HTML 要素の削除またはクリア example_jquery

WBOY
WBOYオリジナル
2016-05-16 16:40:151334ブラウズ

jQuery は、次の 2 つのメソッドを使用して HTML 要素を削除またはクリアします。

remove() – 指定された要素 (そのサブ要素を含む) を削除します
empty() – 指定された要素

の子要素を空にします

例:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>JQuery Demo</title> 
<script src="scripts/jquery-1.9.1.js"></script> 
<script> 
$(document).ready(function () { 
$("button").click(function () { 
$("#div1").remove(); 
}); 
}); 
</script> 
</head> 
<body> 

<div id="div1" style="height: 100px; width: 300px; 
border: 1px solid black; background-color: yellow;"> 
This is some text in the div. 
<p>This is a paragraph in the div.</p> 
<p>This is another paragraph in the div.</p> 

</div> 
<br> 
<button>Remove div element</button> 

</body> 
</html>
empty:
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>JQuery Demo</title> 
<script src="scripts/jquery-1.9.1.js"></script> 
<script> 
$(document).ready(function () { 
$("button").click(function () { 
$("#div1").empty(); 
}); 
}); 
</script> 
</head> 
<body> 

<div id="div1" style="height: 100px; width: 300px; 
border: 1px solid black; background-color: yellow;"> 
This is some text in the div. 
<p>This is a paragraph in the div.</p> 
<p>This is another paragraph in the div.</p> 

</div> 
<br> 
<button>Empty the div element</button> 

</body> 
</html>

jQuery のremove() メソッドは、削除する必要がある一部の HTML 要素をフィルタリングするために使用できるパラメータもサポートしています。このパラメータには、任意の有効な jQuery セレクターを指定できます。
たとえば、次のコードは class="italic" の e388a4556c0f65e1904146cc1a846bee 要素のみを削除します。

$("p").remove(".italic");
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。