Das Beispiel in diesem Artikel zeigt Ihnen den detaillierten Implementierungsprozess der Funktion zum Löschen aller Elemente hinter einem Element. Der spezifische Implementierungsinhalt ist wie folgt
Realisierungseffekt:
Wählen Sie ein Element aus
Klicken Sie auf die Schaltfläche „Löschen“. Alle gleichgeordneten Elemente nach dem ausgewählten Element werden gelöscht
Die nextAll()-Methode der jQuery-Durchquerung kann nach Geschwisterelementen suchen, die den Elementen im DOM-Baum folgen, also nach allen Geschwisterelementen nach einem Element $(selector).nextAll().remove();
Unten finden Sie eine Beispieldemonstration: Nachdem Sie auf die Schaltfläche geklickt haben, löschen Sie alle Optionen nach dem ausgewählten Element
Erstellen Sie ein HTML-Element
<div class="box"> <span>点击按钮后，删除被选项目之后的所有选项。</span><br> <div class="content"> <input type="checkbox" name="item"><span>萝卜</span> <input type="checkbox" name="item"><span>青菜</span> <input type="checkbox" name="item"><span>小葱</span><br> <input type="checkbox" name="item"><span>豆腐</span> <input type="checkbox" name="item"><span>土豆</span> <input type="checkbox" name="item"><span>茄子</span><br> </div> <input type="button" value="删除"> </div>
Einfach den CSS-Stil festlegen
div.box{width:300px;height:200px;padding:10px 20px;border:4px dashed #ccc;}
div.box>span{color:#999;font-style:italic;}
div.content{width:250px;height:100px;margin:10px 0;border:1px solid green;}
input{margin:10px;}
input[type='button']{width:200px;height:35px;margin:10px;border:2px solid #ebbcbe;}
JQuery-Code schreiben
$(function(){
$("input:button").click(function() {
$("input:checkbox:checked").next().nextAll().remove();
});
})
Die oben genannten Wissenspunkte wurden vom Herausgeber für alle vorbereitet. Ich hoffe, Sie können sie gekonnt beherrschen.
