jquery melaksanakan fungsi memadam semua elemen selepas elemen_jquery

Contoh dalam artikel ini berkongsi dengan anda proses pelaksanaan terperinci fungsi jquery untuk memadam semua elemen di sebalik elemen Kandungan pelaksanaan khusus adalah seperti berikut

Kesan realisasi:

Pilih item

Klik butang padam, dan semua elemen adik-beradik selepas item yang dipilih akan dipadamkan

Kaedah nextAll() jQuery traversal boleh mencari elemen adik beradik mengikut elemen dalam pepohon DOM, iaitu semua elemen adik beradik selepas elemen Untuk memadam, anda boleh menggunakan kaedah remove(), jadi sambungannya $(selector).nextAll().remove();
Contoh demonstrasi diberikan di bawah: selepas mengklik butang, padam semua pilihan selepas item yang dipilih
Cipta elemen 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>

Tetapkan gaya css dengan mudah

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

Tulis kod jquery

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

Di atas adalah titik pengetahuan yang disediakan oleh editor untuk semua orang saya harap anda dapat menguasainya dengan mahir.