Heim > Artikel > Web-Frontend > So löschen Sie übergeordnete Elemente in JQuery
So löschen Sie übergeordnete Elemente in JQuery
- 青灯夜游Original
- 2022-03-10 19:04:282570Durchsuche
删除方法：1、用unwrap()方法删除，语法“$(selector).unwrap()”；2、用parent()获取上级元素，用remove()方法删除获取到的元素，语法“$(selector).parent().remove()”。
本教程操作环境：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>
方法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>
【推荐学习：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
Vorheriger Artikel：So legen Sie Attribute für Elemente in JQuery festNächster Artikel：So legen Sie Attribute für Elemente in JQuery fest