jqueryでノードの下にあるすべての要素を削除する方法-フロントエンドQ&A-php.cn

jqueryでノードの下にあるすべての要素を削除する方法

青灯夜游

リリース： 2022-04-21 16:05:13

オリジナル

2605 人が閲覧しました

ノードの下のすべての要素を削除する方法: 1. find() を使用して、ノードの下のすべてのサブセット要素 (サブセットのサブセットを含む) を取得します。構文は「specify node object.find("*") です。」 "; 2. 取得した要素 (すべてのテキストとサブノードを含む) を削除するには、remove() を使用します。構文は「取得した要素 set.remove()」です。

jqueryでノードの下にあるすべての要素を削除する方法

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

ノードの下のすべての要素を削除する jquery メソッド

実装アイデア:

find を使用する( ) メソッドを使用して、ノード下のすべてのサブセット要素 (サブセットのサブセットを含む) を取得します。
remove() メソッドを使用して、取得したすべてのサブセット要素を削除します

実装コード:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<style>
			.div,
			div * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
			ul *{
				color:red;
				border:2px solid red;
			}
		</style>

		<script>
			$(document).ready(function() {
				$("button").on("click", function() {
					$("ul").find("*").remove();
				});
			});
		</script>
	</head>

	<body class="ancestors">
		<div style="width:500px;">div (父节点)
			<ul>ul (指定元素)
				<li>li (子节点1)
					<span>span (孙节点1)</span>
				</li>
				<li>li (子节点2)
					<span>span (孙节点2)</span>
				</li>
				<li>li (子节点3)
					<span>span (孙节点3)</span>
				</li>
			</ul>
		</div>
		<button>删除ul节点下所有元素</button>
	</body>

</html>

ログイン後にコピー

jqueryでノードの下にあるすべての要素を削除する方法

説明:

find() メソッドは選択された要素を返します。子孫要素(子孫とは、子、孫、ひ孫などです)。

find() メソッドは、DOM 要素の子孫から最後の子孫 () までのすべてのパスをたどります。
#remove() メソッドは、すべてのテキストと子ノードを含む、選択された要素を削除します。このメソッドは、選択した要素からデータとイベントも削除します。

【推奨学習: jQuery ビデオチュートリアル、Web フロントエンドビデオ】

以上がjqueryでノードの下にあるすべての要素を削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。