ホームページ > 記事 > ウェブフロントエンド > 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(); }); })
以上は編集者が皆さんのために用意した知識ポイントですので、上手に使いこなしていただければと思います。