jquery implémente la fonction de suppression de tous les éléments après un element_jquery

L'exemple de cet article partage avec vous le processus d'implémentation détaillé de la fonction de jquery consistant à supprimer tous les éléments derrière un élément. Le contenu spécifique de l'implémentation est le suivant

.

Effet de réalisation :

Sélectionnez un article

Cliquez sur le bouton Supprimer et tous les éléments frères et sœurs après l'élément sélectionné seront supprimés

La méthode nextAll() du parcours jQuery peut rechercher des éléments frères suivant les éléments dans l'arborescence DOM, c'est-à-dire tous les éléments frères après un élément. Pour supprimer, vous pouvez utiliser la méthode remove(), donc la connexion est. $(selector).nextAll().remove();
Un exemple de démonstration est donné ci-dessous : après avoir cliqué sur le bouton, supprimez toutes les options après l'élément sélectionné
Créer un élément HTML

<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>

Définissez simplement le style CSS

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;}

Écrivez le code jquery

$(function(){
 $("input:button").click(function() {
 $("input:checkbox:checked").next().nextAll().remove();
 });
})

Ce qui précède sont les points de connaissances préparés par l'éditeur pour tout le monde. J'espère que vous pourrez les maîtriser habilement.