jquery implementiert die Funktion zum Löschen aller Elemente nach einer element_jquery

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.