jquery implements the function of deleting all elements after an element_jquery

The example in this article shares with you the detailed implementation process of jquery's function of deleting all elements behind an element. The specific implementation content is as follows

Realization effect:

Select an item

Click the delete button, and all sibling elements after the selected item will be deleted

The nextAll() method of jQuery traversal can search for sibling elements following the elements in the DOM tree, that is, all sibling elements after an element. To delete, you can use the method remove(), so the connection is $(selector).nextAll().remove();
An example demonstration is given below: after clicking the button, delete all options after the selected item
Create 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>

Simplely set the css style

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

Write jquery code

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

The above are the knowledge points prepared by the editor for everyone. I hope you can master them skillfully.