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