Heim > Artikel > Web-Frontend > So entfernen Sie Geschwisterknoten in JQuery

So entfernen Sie Geschwisterknoten in JQuery

青灯夜游Original: 2022-04-21 18:02:451957Durchsuche

So entfernen Sie Geschwisterknoten in jquery: 1. Verwenden Sie siblings(), next(), prev() und andere Funktionen, um die designierten Geschwisterknoten des ausgewählten Elements abzurufen, zum Beispiel „element object.siblings()“ 2 . Verwenden Sie „remove()“, um den erhaltenen Geschwisterknoten zu löschen. Die Syntax lautet „sibling node.remove()“.

Die Betriebsumgebung dieses Tutorials: Windows7-System, jquery1.10.2-Version, Dell G3-Computer. JQuery-Methode zum Entfernen von Geschwisterknoten (), nextUntil(), prev(), prevAll(), prevUntil()

siblings()-Methode, die hauptsächlich zum Abrufen aller Geschwisterelemente derselben Ebene des angegebenen Elements verwendet wird

next()-Methode , hauptsächlich verwendet Holen Sie sich das nächste Geschwisterelement des angegebenen Elements

nextAll()-Methode, wird hauptsächlich verwendet, um alle Geschwisterelemente des nächsten Geschwisterelements des angegebenen Elements abzurufen

nextUntil()-Methode, wird hauptsächlich dazu verwendet Rufen Sie das nächste Geschwisterelement des angegebenen Elements ab. Dieses Geschwisterelement muss ein Element zwischen dem angegebenen Element und dem durch die Methode nextUntil() festgelegten Element sein. Die Methode prev() wird hauptsächlich zum Abrufen der oberen Ebene verwendet Geschwisterelement des angegebenen Elements

prevAll() Methode, die hauptsächlich zum Abrufen aller Geschwisterelemente auf der vorherigen Ebene des angegebenen Elements verwendet wird
prevUntil() Methode, die hauptsächlich zum Abrufen des vorherigen Geschwisterelements verwendet wird angegebenes Element. Dieses Geschwisterelement muss durch das angegebene Element und die prevUntil()-Methode festgelegt werden. Die Elemente zwischen Elementen werden mit der Methode „remove()“ (Geschwisterknoten) gelöscht. Folgendes Verwendet siblings(), next(), prev() als Beispiel, um die Löschmethode vorzustellen:

Beispiel 1: Entfernen Sie die mit der siblings()-Methode erhaltenen Geschwisterknoten

<!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>

Beispiel 2: Entfernen Sie die Geschwisterknoten erhalten durch die next()-Methode

<!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>

Beispiel 3: Entfernen Sie die Geschwisterknoten, die durch die prev()-Methode erhalten wurden

<!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-Video-Tutorial
,
Web-Front-End-Video

Das obige ist der detaillierte Inhalt vonSo entfernen Sie Geschwisterknoten in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Was ist die Verwendung von Kontext in ReactNächster Artikel：Was ist die Verwendung von Kontext in React

In Verbindung stehende Artikel

Mehr sehen