jquery實現(xiàn)刪除一個元素后面的所有元素功能
更新時間：2015年12月21日 11:05:51 投稿：lijiao
這篇文章主要介紹了jquery實現(xiàn)刪除一個元素后面的所有元素功能，操作簡單方便，感興趣的小伙伴們可以參考一下
本文實例為大家分享了jquery實現(xiàn)刪除一個元素后面的所有元素功能的詳細實現(xiàn)過程，具體實現(xiàn)內(nèi)容如下
實現(xiàn)效果：
選擇項目
點擊刪除按鈕，被選項之后的所有同級元素都被刪除
jQuery 遍歷的nextAll() 方法可以搜索 DOM 樹中的元素跟隨的同胞元素，也就是一個元素后面的所有同級元素，刪除可以使用方法remove()，所以連起來為$(selector).nextAll().remove();
下面給出實例演示：點擊按鈕后，刪除被選項目之后的所有選項
創(chuàng)建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>
簡單設(shè)置一下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();
});
})
以上就是小編為大家準備的知識點，希望大家可以熟練掌握。
相關(guān)文章
jquery.validate 自定義驗證方法及validate相關(guān)參數(shù)
jquery.validate是一個基于jquery的非常優(yōu)秀的驗證框架，我們可以通過它迅速驗證一些常見的輸入,并且可以自己擴充自己的驗證方法，而且對國際化也有非常好的支持，通過本文給大家介紹jquery.validate 自定義驗證方法及validate相關(guān)參數(shù)，需要的朋友一起學(xué)習(xí)吧2016-01-01
jQuery實現(xiàn)簡單的回到頂部totop功能示例
這篇文章主要介紹了jQuery實現(xiàn)簡單的回到頂部totop功能,涉及jQuery事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-10-10
這篇文章主要介紹了jquery淡入淡出效果簡單實現(xiàn)方法,以完整實例形式分析了jQuery中fadeIn及fadeOut實現(xiàn)淡入淡出的相關(guān)技巧,需要的朋友可以參考下2016-01-01
jquery 將日期分離成年月日的代碼，需要的朋友可以參考下。2010-05-05
基于jquery實現(xiàn)的仿優(yōu)酷圖片輪播特效代碼
這篇文章主要為大家介紹了基于jquery實現(xiàn)的仿優(yōu)酷圖片輪播特效代碼，感興趣的小伙伴們可以參考一下2016-01-01
JQuery.validate在ie8下不支持的快速解決方法
下面小編就為大家?guī)硪黄狫Query.validate在ie8下不支持的快速解決方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2016-05-05
本文主要介紹了jquery實現(xiàn)簡單彈窗遮罩效果的實例，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
下面小編就為大家?guī)硪黄猨query對dom節(jié)點的操作。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-04-04
jquery.validate.js validation表單的驗證插件2010-03-03
公司做了個秒殺頁面，需要做一個倒計時效果，感覺還特此收藏，喜歡的朋友也可以學(xué)習(xí)下2013-09-09