Comment supprimer les nœuds frères et sœurs dans jquery-Questions et réponses frontales-php.cn

Comment supprimer les nœuds frères et sœurs dans jquery

青灯夜游

Libérer： 2022-04-21 18:02:45

original

1949 Les gens l'ont consulté

Comment supprimer les nœuds frères avec jquery : 1. Utilisez siblings(), next(), prev() et d'autres fonctions pour obtenir les nœuds frères désignés de l'élément sélectionné, par exemple "element object.siblings()" 2 ; . Utilisez remove() Supprimez le nœud frère obtenu, la syntaxe est "sibling node.remove()".

Comment supprimer les nœuds frères et sœurs dans jquery

L'environnement d'exploitation de ce tutoriel : système windows7, version jquery1.10.2, ordinateur Dell G3.

Méthode jquery pour supprimer les nœuds frères

Idée d'implémentation :

Utilisez la méthode jquery pour obtenir des nœuds frères

Il existe généralement sept méthodes pour obtenir des nœuds frères : siblings(), next(), nextAll ( ), méthode nextUntil(), prev(), prevAll(), prevUntil()
- siblings(), principalement utilisée pour obtenir tous les éléments frères du même niveau de l'élément spécifié
- next() méthode , principalement utilisé pour obtenir l'élément frère suivant de l'élément spécifié
- méthode nextAll(), principalement utilisé pour obtenir tous les éléments frères de l'élément frère suivant de l'élément spécifié
- méthode nextUntil(), principalement utilisée pour obtenir l'élément frère suivant de l'élément frère spécifié, cet élément frère doit être un élément entre l'élément spécifié et l'élément défini par la méthode nextUntil()
- prev(), principalement utilisée pour obtenir le niveau supérieur élément frère de l'élément spécifié
- prevAll() Méthode, principalement utilisée pour obtenir tous les éléments frères au niveau précédent de l'élément spécifié
- prevUntil(), principalement utilisée pour obtenir l'élément frère précédent de l'élément spécifié. Élément spécifié. Cet élément frère doit être défini par l'élément spécifié et la méthode prevUntil(). Les éléments entre les éléments

Utilisez la méthode remove() pour supprimer les nœuds frères obtenus

Ce qui suit utilise siblings(), next(), prev() comme exemple pour introduire la méthode de suppression :

Exemple 1 : Supprimez les nœuds frères obtenus par la méthode siblings()

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

Copier après la connexion

Comment supprimer les nœuds frères et sœurs dans jquery

Exemple 2 : Supprimez les nœuds frères obtenu par la méthode next()

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

Copier après la connexion

Comment supprimer les nœuds frères et sœurs dans jquery

Exemple 3 : Supprimez les nœuds frères obtenus par la méthode prev()

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

Copier après la connexion

Comment supprimer les nœuds frères et sœurs dans jquery