jqueryで兄弟ノードを削除する方法-フロントエンドQ&A-php.cn

jqueryで兄弟ノードを削除する方法

青灯夜游

リリース： 2022-04-21 18:02:45

オリジナル

1981 人が閲覧しました

兄弟ノードを削除するための Jquery メソッド: 1. 兄弟ノード()、next()、prev() およびその他の関数を使用して、選択した要素の指定された兄弟ノード (element object.siblings() など) を取得します。 "; 2. 取得した兄弟ノードを削除するには、remove() を使用します。構文は「sibling node.remove()」です。

jqueryで兄弟ノードを削除する方法

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

兄弟ノードを削除する jquery メソッド

実装アイデア:

jquery を使用する兄弟ノードを取得するメソッド

兄弟ノードを取得するには、通常、sisters()、next()、nextAll()、nextUntil()、prev()、prevAll()、prevUntil()## の 7 つのメソッドがあります。
- #siblings() メソッド、主に指定された要素の同じレベルのすべての兄弟要素を取得するために使用されます。

##remove() メソッドを使用して、取得した兄弟ノードを削除します

以下では、sisters()、next()、prev() を例として、削除メソッドを紹介します。

例 1: sinners() メソッドで取得した兄弟ノードを削除します

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-1.10.2.min.js"></script>
		<style>
			.siblings * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
		<script>
			$(document).ready(function() {
				$("li.start").siblings().css({
					"color": "red",
					"border": "2px solid red"
				});
				$("button").click(function() {
					$("li.start").siblings().remove();
				});
			});
		</script>
	</head>
	<body>

		<div style="width:500px;" class="siblings">
			<ul>ul (父节点)
				<li>li (类名为"star"的上一个兄弟节点)</li>
				<li>li (类名为"star"的上一个兄弟节点)</li>
				<li class="start">类名称为“star”的li元素</li>
				<li>li (类名为"star"的下一个兄弟节点)</li>
				<li>li (类名为"star"的下一个兄弟节点)</li>
			</ul>
		</div>
		<p>选择类名称为“star”的li元素的所有兄弟元素</p>
		<button>删除所有兄弟元素</button>
	</body>
</html>

ログイン後にコピー

例 2: next( ) メソッドを削除して兄弟ノードを取得します jqueryで兄弟ノードを削除する方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-1.10.2.min.js"></script>
		<style>
			.siblings * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
		<script>
			$(document).ready(function() {
				$("li.start").next().css({
					"color": "red",
					"border": "2px solid red"
				});
				$("button").click(function() {
					$("li.start").next().remove();
				});
			});
		</script>
	</head>
	<body>

		<div style="width:500px;" class="siblings">
			<ul>ul (父节点)
				<li>li (类名为"star"的上上一个兄弟节点)</li>
				<li>li (类名为"star"的上一个兄弟节点)</li>
				<li class="start">类名称为“star”的li元素</li>
				<li>li (类名为"star"的下一个兄弟节点)</li>
				<li>li (类名为"star"的下下一个兄弟节点)</li>
			</ul>
		</div>
		<p>选择类名称为“star”的li元素的下一个兄弟元素</p>
		<button>删除下一个兄弟元素</button>
	</body>
</html>

ログイン後にコピー

例 3: 次によって取得された兄弟ノードを削除しますprev() メソッド jqueryで兄弟ノードを削除する方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-1.10.2.min.js"></script>
		<style>
			.siblings * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
		<script>
			$(document).ready(function() {
				$("li.start").prev().css({
					"color": "red",
					"border": "2px solid red"
				});
				$("button").click(function() {
					$("li.start").prev().remove();
				});
			});
		</script>
	</head>
	<body>

		<div style="width:500px;" class="siblings">
			<ul>ul (父节点)
				<li>li (类名为"star"的上上一个兄弟节点)</li>
				<li>li (类名为"star"的上一个兄弟节点)</li>
				<li class="start">类名称为“star”的li元素</li>
				<li>li (类名为"star"的下一个兄弟节点)</li>
				<li>li (类名为"star"的下下一个兄弟节点)</li>
			</ul>
		</div>
		<p>选择类名称为“star”的li元素的上一个兄弟元素</p>
		<button>删除上一个兄弟元素</button>
	</body>
</html>

ログイン後にコピー

[推奨学習: jqueryで兄弟ノードを削除する方法 jQuery ビデオチュートリアル