Maison > interface Web > js tutoriel > jquery implémente la fonction de suppression de tous les éléments après un element_jquery

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

WBOY
Libérer: 2016-05-16 15:24:10
original
1386 Les gens l'ont consulté

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>
Copier après la connexion

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;}
Copier après la connexion

Écrivez le code jquery

$(function(){
 $("input:button").click(function() {
 $("input:checkbox:checked").next().nextAll().remove();
 });
})
Copier après la connexion

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.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal