Maison > Article > interface Web > Comment supprimer l'élément précédent dans jquery

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

青灯夜游original: 2022-05-17 19:22:051638parcourir

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()".

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)

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>

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()

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>

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

[Apprentissage recommandé : Tutoriel vidéo jQuery, vidéo web front-end ]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

jquery Filter 对象选择器 li

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment changer la hauteur div en utilisant jqueryArticle suivant：Comment changer la hauteur div en utilisant jquery

Articles Liés

Voir plus