jquery实现删除一个元素后面的所有元素功能
2015-12-21 11:05
806 查看
本文实例为大家分享了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(); }); })
以上就是小编为大家准备的知识点,希望大家可以熟练掌握。
您可能感兴趣的文章:
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- JavaScript 各种遍历方式详解
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码
- 使用Browserify配合jQuery进行编程的超级指南
- jquery如何实现在加载完iframe的内容后再进行操作
- jquery $.ajax()取xml数据的小问题解决方法
- jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
- Jquery 表单取值赋值的一些基本操作