jquery实现删除一个元素后面的所有元素功能


Posted in Javascript onDecember 21, 2015

本文实例为大家分享了jquery实现删除一个元素后面的所有元素功能的详细实现过程,具体实现内容如下

实现效果:

选择项目

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

以上就是小编为大家准备的知识点,希望大家可以熟练掌握。

Javascript 相关文章推荐
jQuery 浮动广告实现代码
Dec 25 Javascript
js 判断 enter 事件
Feb 12 Javascript
Raphael带文本标签可拖动的图形实现代码
Feb 20 Javascript
js 实现日期灵活格式化的小例子
Jul 14 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
Oct 17 Javascript
JavaScript中判断函数、变量是否存在
Jun 10 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
Oct 23 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
Jan 03 Javascript
Electron vue的使用教程图文详解
Jul 05 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
Aug 14 Javascript
JS错误处理与调试操作实例分析
Apr 13 Javascript
绘制微信小程序验证码功能的实例代码
Jan 05 Javascript
浅析JavaScript声明变量
Dec 21 #Javascript
jQuery实现图片文字淡入淡出效果
Dec 21 #Javascript
深入浅析Node.js 事件循环
Dec 20 #Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
Dec 20 #Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
Dec 20 #Javascript
jQuery mobile 移动web(4)
Dec 20 #Javascript
基于jQuery实现放大镜特效
Oct 19 #Javascript
You might like
咖啡豆的最常见发酵处理方法,详细了解一下
2021/03/03 冲泡冲煮
PHP音乐采集(部分代码)
2007/02/14 PHP
PHP扩展编写点滴 技巧收集
2010/03/09 PHP
一个PHP的ZIP压缩类分享
2014/05/04 PHP
PHP的fsockopen、pfsockopen函数被主机商禁用的解决办法
2014/07/08 PHP
PHP中session跨子域的三种实现方法
2016/07/25 PHP
PHP7安装Redis扩展教程【Linux与Windows平台】
2016/09/30 PHP
PHP新特性之字节码缓存和内置服务器
2017/08/11 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
在javascript将NodeList作为Array数组处理的方法
2010/07/09 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
2014/03/06 Javascript
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
详解JS中Array对象扩展与String对象扩展
2016/01/07 Javascript
jQuery简单操作cookie的插件实例
2016/01/13 Javascript
JavaScript常用字符串与数组扩展函数小结
2016/04/24 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
AngularJS全局警告框实现方法示例
2017/05/18 Javascript
Vue2.0如何发布项目实战
2017/07/27 Javascript
Vue自定义事件(详解)
2017/08/19 Javascript
基于node下的http小爬虫的示例代码
2018/01/11 Javascript
vue-cli+webpack项目 修改项目名称的方法
2018/02/28 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
2018/04/12 jQuery
Node.js API详解之 string_decoder用法实例分析
2020/04/29 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
2020/06/01 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Python加密方法小结【md5,base64,sha1】
2017/07/13 Python
python调用staf自动化框架的方法
2018/12/26 Python
python三方库之requests的快速上手
2019/03/04 Python
python爬虫快速响应服务器的做法
2020/11/24 Python
Trip.com澳大利亚:在线旅行社
2019/12/01 全球购物
什么是makefile? 如何编写makefile?
2013/01/02 面试题
运动会开幕式主持词
2014/03/28 职场文书
优秀少先队辅导员事迹材料
2014/12/24 职场文书
老公保证书怎么写
2015/02/26 职场文书
应届生个人的求职(自荐信范文2篇)
2019/08/23 职场文书