jQuery 遍历的nextAll() 方法可以搜索 DOM 树中的元素跟随的同胞元素,也就是一个元素后面的所有同级元素,删除可以使用方法remove(),所以连起来为

$(selector).nextAll(“条件”).remove();

下面给出实例演示:点击按钮后,删除被选项目之后的所有选项

  1. 创建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>
  2. 简单设置一下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;}
  3. 编写jquery代码

    $(function(){
    $("input:button").click(function() {
    $("input:checkbox:checked").next().nextAll().remove();
    });
    })
  4. 观察显示效果

  • 选择项目

  • 点击删除按钮,被选项之后的所有同级元素都被删除

jQuery移除指定元素后的所有元素的更多相关文章

  1. 使用jquery移除前面通过onclick绑定的元素的事件,然后重新绑定别的函数来执行onclick事件。

    http://caibaojian.com/css3/experience/bugs.htm 使用jquery移除前面通过onclick绑定的元素的事件,然后重新绑定别的函数来执行onclick事件. ...

  2. Java易错知识点(1) - 关于ArrayList移除元素后剩下的元素会立即重排

    帮一个网友解答问题时,发现这样一个易错知识点,现总结如下: 1.易错点: ArrayList移除元素后,剩下的元素会立即重排,他的 size() 也会立即减小,在循环过程中容易出错.(拓展:延伸到所有 ...

  3. $("label + input") 匹配所有紧接在 prev 元素后的 next 元素

    描述: 匹配所有跟在 label 后面的 input 元素 HTML 代码: <form> <label>Name:</label> <input name= ...

  4. jQuery -&gt; 获取指定上下文中的DOM元素

    jQuery函数的第二个參数能够指定DOM元素的搜索范围. 第二个參数可分为下面类型 DOM reference jQuery wrapper document 代码演示样例 <!DOCTYPE ...

  5. 【jQuery】 JQ和HTML以及JQ遍历元素

    JQ & HTML JQ作为一个JS库,很好地继承了JS和HTML互动的特点,并且还给出了包装得更好,操作层次更高的方法.和之前JQ的内容一样,方法的表现形式是$(selector).acti ...

  6. CSS float与clear & 替换元素与非替换元素

    css3盒模型(box)中的一个概念,在css这种,每个元素生成了包含内容的框,有内联元素和块级元素之分.也可以区分为替换元素与非替换元素. 替换元素:浏览器根据标签的元素与属性来判断显示具体的内容. ...

  7. CSS选择器(通配符选择器、标签选择器、类选择器、id选择器、群组选择器、后代选择器、子元素选择器和相邻元素选择器)

    通配符选择器  *   与任何元素匹配 派生选择器: 后代选择器(包含选择器):后代选择器可以选择作为元素后代的元素 A B    对A元素中的B元素应用样式 后代选择器中两个元素间的层次间隔可以是无 ...

  8. 【Vue】删除数组元素,导致剩余元素被重新渲染

    最近在项目中有使用Vue,然而在开发过程中发现,当我对数组中的元素进行删除时,会导致该元素后面的元素没有被重新渲染. html代码如下:有两个组件:一个是Main组件,用来包含所有的内容容器:一个是子 ...

  9. jquery移除、绑定、触发元素事件使用示例详解

    这篇文章主要介绍了jquery移除.绑定.触发元素事件使用示例详解,需要的朋友可以参考下. unbind(type [,data]) //data是要移除的函数 $('#btn').unbind(&q ...

随机推荐

  1. highcharts 柱形图 饼图 加URL或Click事件

    我们在做图表的时候,有时候需要在单个数据上加链接或点击事件,是在plotOptions里的events里设置的 plotOptions: { pie: { cursor: 'pointer', eve ...

  2. DevExpress GridControl GridView 导出到 Excel 类

    说明: 1>GridView 导出到 Excel (如果分页,只导出当前页数据) 2>GridView 导出到 Excel 3>方法2可以参考DataTable 导出到 Excel ...

  3. Cocos2d-x创建新工程

    转自:http://www.cnblogs.com/andyque/archive/2011/09/27/2192920.html 而是新建一个工程.然后,我们不是copy文件夹.lib和dll了.我 ...

  4. requestFocusFromTouch , requestFocus

    /*if(userNameEditText.isInTouchMode()){ userNameEditText.requestFocusFromTouch(); }else{ userNameEdi ...

  5. 玩转Android之Picasso使用详详详详详详解,从入门到源码剖析!!!!

    Picasso是Squareup公司出的一款图片加载框架,能够解决我们在Android开发中加载图片时遇到的诸多问题,比如OOM,图片错位等,问题主要集中在加载图片列表时,因为单张图片加载谁都会写.如 ...

  6. oracle Form Builer:ID_NULL Built-in

    Description                                                                     Returns a BOOLEAN va ...

  7. Java中的编码问题

    下面将侧重介绍java乱码是如何产生的.存在哪些乱码的情况.该如何从根本上解决乱码问题.各位随博主一起征服令人厌烦的java乱码问题吧!!! 一.Java编码转换过程 我们总是用一个java类文件和用 ...

  8. 跨时钟域设计【二】——Fast to slow clock domain

    跨时钟域设计中,对快时钟域的Trigger信号同步到慢时钟域,可以采用上面的电路实现,Verilog HDL设计如下:   // Trigger signal sync, Fast clock dom ...

  9. http://venkatbaggu.com/file-upload-in-asp-net-mvc-using-dropzone-js-and-html5/

    http://venkatbaggu.com/file-upload-in-asp-net-mvc-using-dropzone-js-and-html5/ http://www.cnblogs.co ...

  10. (转)使用OpenVPN的一些注意事项

    原文地址:http://www.365mini.com/page/16.htm 本文介绍的只是OpenVPN连接或使用过程中的一些注意事项,如果你尚未下载安装OpenVPN,你可以点击查看OpenVP ...