jqueryは、element_jqueryの後のすべての要素を削除する機能を実装します。

この記事の例では、要素の背後にあるすべての要素を削除する jquery の関数の詳細な実装プロセスを共有します。具体的な実装内容は次のとおりです。

実現効果:

項目を選択してください

削除ボタンをクリックすると、選択した項目以降の兄弟要素がすべて削除されます

jQuery トラバーサルの nextAll() メソッドは、DOM ツリー内の要素に続く兄弟要素、つまり、要素の後のすべての兄弟要素を検索できます。削除するには、remove() メソッドを使用できるため、接続は次のようになります。 $(selector).nextAll().remove();
デモの例を以下に示します。ボタンをクリックした後、選択した項目の後のすべてのオプションを削除します
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>

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

jquery コードを書く

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

以上は編集者が皆さんのために用意した知識ポイントですので、上手に使いこなしていただければと思います。