当前位置: 首页 > 编程笔记 >

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

秦景同
2023-03-14
本文向大家介绍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();
 });
})

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

 类似资料:
  • 假设我有这样的html: 我只想获得之前的 。有没有办法用JSOUP做到这一点呢?我知道我可以把所有的宠物都弄成这样: 但这也包括额外的宠物。我想知道我是只能选择上面的宠物还是只是删除下面的宠物然后使用那个代码?

  • 主要内容:删除元素/内容,jQuery remove() 方法,实例,jQuery empty() 方法,实例,过滤被删除的元素,实例通过 jQuery,可以很容易地删除已有的 HTML 元素。 删除元素/内容 如需删除元素和内容,一般可使用以下两个 jQuery 方法: remove() - 删除被选元素(及其子元素) empty() - 从被选元素中删除子元素 jQuery remove() 方法 jQuery remove() 方法删除被选元素及其子元素。 实例 $("#div1").re

  • 问题内容: 我正在使用,我想删除所有出现的特定元素。 它仅删除第一次出现的事件。但是我希望所有列表都被删除,因为我希望列表仅保留值“ second”。通过谷歌搜索发现,可以通过创建新列表并调用来实现。但是是否可以在不创建新列表的情况下删除所有出现的内容,或者是否有可用的API来实现它? 问题答案:

  • 本文向大家介绍jQuery 添加元素和删除元素的方法,包括了jQuery 添加元素和删除元素的方法的使用技巧和注意事项,需要的朋友参考一下 添加新的 HTML 内容 我们将学习用于添加新内容的四个 jQuery 方法: append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插

  • 问题内容: 我正在使用Python的库编写基于GUI的程序。我遇到了一个问题:我需要删除 所有 子元素(而不删除父元素,在我的情况下是)。 我的代码: 我该如何实现? 问题答案: 您可以用来获取特定小部件的所有子级的列表,然后可以对其进行遍历:

  • 给定下面的代码: HTML: 断续器 我必须使用此代码才能删除元素吗?它似乎太冗长了。