Comment supprimer l'élément précédent dans jquery-Questions et réponses frontales-php.cn

Comment supprimer l'élément précédent dans jquery

青灯夜游

Libérer： 2022-06-08 16:33:33

original

1766 Les gens l'ont consulté

Comment supprimer l'élément précédent : 1. Utilisez prev() pour sélectionner l'élément précédent de l'élément spécifié. La syntaxe "$(specified element).prev()" renverra un objet jquery contenant l'élément précédent ; Utilisez Remove() pour supprimer l'objet jquery, la syntaxe est "jquery object.remove()".

Comment supprimer l'élément précédent dans jquery

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

Méthode jquery pour supprimer l'élément précédent

1. Utilisez la méthode prev() pour sélectionner l'élément précédent de l'élément spécifié

prev() peut obtenir l'élément frère de niveau supérieur de l'élément spécifié. élément.

Syntaxe :

$(selector).prev(filter)

Copier après la connexion

Paramètres	Description
filter	Facultatif. Spécifie une expression de sélection qui restreint la recherche de l'élément frère précédent.

Exemple : Sélectionnez l'élément précédent de l'élément li avec le nom de classe "start"

<!DOCTYPE html>
<html>

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

		<div style="width:500px;" class="siblings">
			<ul>ul (父节点)
				<li>li (兄弟节点)</li>
				<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
				<li class="start">li (类名为"start"的li节点)</li>
				<li>li (兄弟节点)</li>
				<li>li (兄弟节点)</li>
			</ul>
		</div>
		<p>选取类名为"start"的li元素的前一个元素</p>
	</body>
</html>

Copier après la connexion

Comment supprimer lélément précédent dans jquery

2. Utilisez Remove() pour supprimer l'élément sélectionné

remove() pour supprimer. l'élément élément sélectionné, y compris tous les textes et nœuds enfants. Syntaxe :

被选元素.remove()

Copier après la connexion

Exemple : sur la base de l'exemple ci-dessus, supprimez l'élément précédent de l'élément li avec le nom de classe "start"

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.2.1.min.js"></script>
		<style>
			.siblings * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
			.start{
				color: peru;
			}
		</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 (兄弟节点)</li>
				<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
				<li class="start">li (类名为"start"的li节点)</li>
				<li>li (兄弟节点)</li>
				<li>li (兄弟节点)</li>
			</ul>
		</div>
		<button>删除类名为"start"的li元素的前一个元素</button>
	</body>
</html>

Copier après la connexion

Comment supprimer lélément précédent dans jquery