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 相关文章推荐
JS判断元素为数字的奇异写法分享
Aug 01 Javascript
jquery实现翻动fadeIn显示的方法
Mar 05 Javascript
js实现Select列表各项上移和下移的方法
Aug 14 Javascript
javascript中undefined与null的区别
Aug 16 Javascript
JS设置cookie、读取cookie
Feb 24 Javascript
Node.js dgram模块实现UDP通信示例代码
Sep 26 Javascript
微信小程序之多文件下载的简单封装示例
Jan 29 Javascript
vue实现点击展开点击收起效果
Apr 27 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
Sep 18 Javascript
详解React 服务端渲染方案完美的解决方案
Dec 14 Javascript
详解js location.href和window.open的几种用法和区别
Dec 02 Javascript
Vue v-bind动态绑定class实例方法
Jan 15 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
php 过滤器实现代码
2010/08/09 PHP
php预定义变量使用帮助(带实例)
2013/10/30 PHP
windows下apache搭建php开发环境
2015/08/27 PHP
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
解决 FireFox 下[使用event很麻烦] 的问题.
2006/08/22 Javascript
JavaScript实现找质数代码分享
2015/03/24 Javascript
浅析jQuery Mobile的初始化事件
2015/12/03 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
2016/09/28 Javascript
js省市区级联查询(插件版&amp;无插件版)
2017/03/21 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
2017/03/30 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
Javascript中window.name属性详解
2020/11/19 Javascript
Python设计模式之抽象工厂模式
2016/08/25 Python
python导入csv文件出现SyntaxError问题分析
2017/12/15 Python
python使用Matplotlib绘制分段函数
2018/09/25 Python
使用Template格式化Python字符串的方法
2019/01/22 Python
python实现一行输入多个值和一行输出多个值的例子
2019/07/16 Python
python爬虫爬取笔趣网小说网站过程图解
2019/11/18 Python
用Python在Excel里画出蒙娜丽莎的方法示例
2020/04/28 Python
如何使用Cython对python代码进行加密
2020/07/08 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
沙特阿拉伯排名第一的在线时尚购物应用程序:1Zillion
2020/08/08 全球购物
顶撞领导检讨书
2014/01/29 职场文书
秋季校运动会广播稿
2014/02/23 职场文书
新春联欢会主持词
2014/03/24 职场文书
房地产活动策划方案
2014/05/14 职场文书
2015年班级元旦晚会活动总结
2014/11/28 职场文书
家长通知书家长意见
2015/06/03 职场文书
《抽屉原理》教学反思
2016/02/20 职场文书
《山中访友》教学反思
2016/02/24 职场文书
golang 实现并发求和
2021/05/08 Golang
python tqdm用法及实例详解
2021/06/16 Python
Mysql数据库值的添加、修改、删除及清空操作实例
2021/06/20 MySQL
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android
Golang解析JSON对象
2022/04/30 Golang