jquery removes all elements after the specified element

The Nextall () method of the JQuery traversal can search for the sibling elements following the elements in the DOM tree, that is, all siblings behind an element, delete can use the method remove (), so it is connected to

$ (selector). Nextall ("condition"). Remove ();

Here's an example: after clicking the button, delete all options after the selected item

2. Creating HTML Elements

   <div class= "box" >
   <span> After clicking the button, delete all options after the selected item. </span><br>
   <div class= "Content" >
   <input type= "checkbox" Name= "item" ><span> radish </span>
   <input type= "checkbox" Name= "Item" ><span> Greens </span>
   <input type= "checkbox" Name= "item" ><span> shallot </span><br>
   <input type= "checkbox" Name= "item" ><span> Tofu </span>
   <input type= "checkbox" Name= "item" ><span> potatoes </span>
   <input type= "checkbox" Name= "item" ><span> Eggplant </span><br>
   </div>
   <input type= "button" value= "Delete" >
   </div>

4. Simple set 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;}

6. Writing jquery Code

   $ (function () {
   $ ("Input:button"). Click (function () {
   $ ("input:checkbox:checked"). Next (). Nextall (). remove ();
   });
   })

8. Observation Display effect

• Select item

• Click the Delete button and all sibling elements after the option are deleted

jquery removes all elements after the specified element