Heim >Web-Frontend >Front-End-Fragen und Antworten >So löschen Sie übergeordnete Elemente in JQuery

So löschen Sie übergeordnete Elemente in JQuery

青灯夜游
青灯夜游Original
2022-03-10 19:04:282655Durchsuche

删除方法:1、用unwrap()方法删除,语法“$(selector).unwrap()”;2、用parent()获取上级元素,用remove()方法删除获取到的元素,语法“$(selector).parent().remove()”。

So löschen Sie übergeordnete Elemente in JQuery

本教程操作环境:windows7系统、jquery1.10.2版本、Dell G3电脑。

jquery删除上级元素(父元素)

方法1:使用unwrap()方法

unwrap() 方法可以移除被选元素的父元素,但保留自身(和兄弟元素,如果存在)在原来的位置。

<!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() {
				$("button").click(function() {
					$("li.start").unwrap();
				});
			});
		</script>
	</head>
	<body>

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

So löschen Sie übergeordnete Elemente in JQuery

方法2:使用parent()获取上级元素,使用remove()方法删除获取到的元素

remove() 方法移除被选元素,包括所有的文本和子节点。该方法也会移除被选元素的数据和事件。

<!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").parent().css({
					"color": "red",
					"border": "2px solid red"
				});
				$("button").click(function() {
					$("li.start").parent().remove();
				});
			});
		</script>
	</head>
	<body>

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

So löschen Sie übergeordnete Elemente in JQuery

【推荐学习:jQuery视频教程web前端视频

Das obige ist der detaillierte Inhalt vonSo löschen Sie übergeordnete Elemente 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