Heim > Artikel > Web-Frontend > So löschen Sie nicht ausgewählte Elemente auf derselben Ebene in JQuery
So löschen Sie nicht ausgewählte Elemente auf derselben Ebene in JQuery
- 青灯夜游Original
- 2022-05-26 14:04:351244Durchsuche
Löschmethode: 1. Verwenden Sie siblings(), um alle anderen Geschwisterelemente des ausgewählten Elements abzurufen. Die Syntax „specify element.siblings()“ gibt ein JQuery-Objekt zurück, das alle Geschwisterelemente enthält Erhaltene Geschwisterelemente, die Syntax lautet „Geschwisterelement object.remove()“.
Die Betriebsumgebung dieses Tutorials: Windows7-System, jquery1.10.2-Version, Dell G3-Computer.
jquery-Methode zum Löschen nicht ausgewählter Elemente auf derselben Ebene
1. Verwenden Sie siblings(), um alle anderen Geschwisterelemente des ausgewählten Elements auszuwählen.
siblings()-Methode, die hauptsächlich zum Abrufen der Geschwister von verwendet wird Das angegebene Element Alle Elemente
$(selector).siblings()
gibt ein JQuery-Objekt zurück, das alle Geschwisterelemente enthält.
2. Verwenden Sie „remove()“, um die erhaltenen Geschwisterelemente zu löschen. Die
同级元素对象.remove()
remove()-Methode entfernt die ausgewählten Elemente, einschließlich aller Text- und untergeordneten Knoten. Diese Methode entfernt auch Daten und Ereignisse aus dem ausgewählten Element.
<!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").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>
【Empfohlenes Lernen: jQuery-Video-Tutorial, Web-Front-End-Entwicklung】
Das obige ist der detaillierte Inhalt vonSo löschen Sie nicht ausgewählte Elemente auf derselben Ebene in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!