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

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

赞 (0)

相关推荐

  • Jquery中删除元素的实现代码

    语法: empty() remove(expr); empty用来删除指定元素的子元素,remove用来删除元素,或者设定细化条件执行删除,如: html 复制代码 代码如下: <div> <p id="emptyTest">此标签的使用empty方法删除</p> <p>以下的标签将被删除</p> <p class="emptyTest">准备使用remove方法删除</p> <

  • jQuery 删除或是清空某个HTML元素示例

    jQuery使用下面两个方法来删除或是清空某个HTML元素. remove() – 删除指定的元素(包括其子元素) empty() – 清空指定元素的子元素 例如: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JQuery Demo</title> <script src="scripts/jquery-1.9.1.js&q

  • jQuery使用removeClass方法删除元素指定Class的方法

    本文实例讲述了jQuery使用removeClass方法删除元素指定Class的方法.分享给大家供大家参考.具体分析如下: <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function

  • js与jquery获取父元素,删除子元素的两种不同方法

    var obj=document.getElementById("id");得到的是dom对象,对该对象进行操作的时候使用js方法 var obj=$("#id");得到的是jquery对象,对该对象进行操作的时候使用jquery方法 1.对于上面获得的对象进行遍历 (1).js方法  for(vat i=0;j<obj.length;i++){ obj[i] 来获得对应的某一个元素} (2).jquery方法  $("#id").each

  • jQuery使用empty()方法删除元素及其所有子元素的方法

    本文实例讲述了jQuery使用empty()方法删除元素及其所有子元素的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function()

  • JQuery给元素添加/删除节点比如select

    jQuery获取Select选择的Text和Value: 复制代码 代码如下: var checkText=jQuery("#select_id").find("option:selected").text(); //获取Select选择的Text var checkValue=jQuery("#select_id").val(); //获取Select选择的option Value var checkIndex=jQuery("#se

  • jQuery动态添加、删除元素的方法

    复制代码 代码如下: <script> $.schoolFn = { addItem: function(obj){ $("#itemList").append("<li id='liItrm' class='list-group-item clearfix'><span class='glyphicon glyphicon-resize-vertical sort-handle'></span>"+obj+"

  • jQuery根据元素值删除数组元素的方法

    本文实例讲述了jQuery根据元素值删除数组元素的方法.分享给大家供大家参考.具体如下: 例如删除C这个元素 ,前提不知道C在这个数组的下标 var arr = ['a','b','c','d']; arr.splice($.inArray('c',arr),1); alert(arr); 希望本文所述对大家的jQuery程序设计有所帮助.

  • jquery增加和删除元素的方法

    jquery增加和删除元素的方法

    本文实例讲述了jquery增加和删除元素的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>jquery增加删除元素</title> <script type="text/javascript&

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

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

    本文实例为大家分享了jquery实现删除一个元素后面的所有元素功能的详细实现过程,具体实现内容如下 实现效果: 选择项目 点击删除按钮,被选项之后的所有同级元素都被删除 jQuery 遍历的nextAll() 方法可以搜索 DOM 树中的元素跟随的同胞元素,也就是一个元素后面的所有同级元素,删除可以使用方法remove(),所以连起来为$(selector).nextAll().remove(); 下面给出实例演示:点击按钮后,删除被选项目之后的所有选项 创建Html元素 <div class=

  • JQuery validate 验证一个单独的表单元素实例

    前提:已引入JQuery validate插件 function validateOneElement() { //验证id="form1"的表单中id="elementId"的表单元素 $("#form1").validate().element($("#elementId")) } 以上这篇JQuery validate 验证一个单独的表单元素实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们

  • 实现Java删除一个集合的多个元素

    问题 我需要从一个java的集合中,根据另一个集合的内容,删除第一个集合中不特定的元素.这看上去非常简单,但却遇到了问题. 这是我要写的方法的头部 private void screenBlackNameList(List<SharedBoardSmsWrapper> source, List<BlackNameListModel> blackNameList) 事情是这样子的.source集合中保存了一些显示用的数据元素.blackNameList集合中保存的是黑名单列表.我们需

  • Python代码实现删除一个list里面重复元素的方法

    网上学习了的两个新方法,代码非常之简洁.看来,不是只要实现了基本功能就能交差滴,想要真的学好python还有很长的一段路呀 方法一:是利用map的fromkeys来自动过滤重复值,map是基于hash的,大数组的时候应该会比排序快点吧 方法二:是用set(),set是定义集合的,无序,非重复 方法三:是排序后,倒着扫描,遇到已有的元素删之 #!/usr/bin/python #coding=utf-8 ''' Created on 2012-2-22 Q: 给定一个列表,去掉其重复的元素,并输出

  • jQuery删除一个元素后淡出效果展示删除过程的方法

    本文实例讲述了jQuery删除一个元素后淡出效果展示删除过程的方法.分享给大家供大家参考.具体分析如下: 当我们删除一个元素时希望能看到删除的过程,这个效果通过对元素进行淡出展示动态化删除过程. $("#myButton").click(function() { $("#myDiv").fadeTo("slow", 0.01, function(){//fade $(this).slideUp("slow", function

  • jQuery实现动态添加和删除一个div

    本文主要给大家简单介绍一下如何动态的在一个元素添加和删除一个div,希望能够得到举一反三之效. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> #father { width:150px; height:150px; background-color:red; } #father div

  • 浅析jquery数组删除指定元素的方法:grep()

    遇到的问题 今天遇到一个问题,删除数组中的一个指定元素,并返回新的数组. 我定义的js数组是这样的: var sexList=new Array[3]; sexList[0]="1"; sexList[1]="2"; sexList[2]=""; 想达到的效果 我想达到的效果是这样的: 删除索引=1的元素,并返回新数组. 返回的结果是: var sexList=new Array("1",""); 我们知道

  • jQuery添加删除DOM元素方法详解

    本文实例分析了jQuery添加删除DOM元素的方法.分享给大家供大家参考,具体如下: 介绍 DOM是Document Object Modeule的缩写,一般来说,DOM操作分成3个方面. 1.DOM Core DOM Core并不专属于javascript,任何一种支持DOM的程序设计语言都可以使用它,用途也远不止仅限于网页,也可以用来处理任何一种使用标记语言编写出来的文档,如XML. 例如:document,getElementsByTagName("form");//使用DOM

  • javascript删除一个html元素节点的方法

    本文实例讲述了利用原生javascript实现删除一个指定的html元素的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>我们

随机推荐