Jquery使用Remove方法删除元素节点

使用Jquery的方法remove()删除节点时，每删除一个节点，其索引会变化,
可以在删除索引后，改变循环的值
使用jQuery的remove方法直接删除节点

直接连续删除两个tr节点，会发现第二个无法删除，因为在第一个节点删除后，第二个的tr节点值由原来的n变化为n-1。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script><style type="text/css">td{height: 90px;width:150px;text-align: center;line-height: 90px;}</style><body><input type="button" name="" id="deletes" value="批量删除" /><br /><table border="2px" cellspacing="0px" cellpadding=""><tr><th><input type="checkbox" name="" id="" value="" /></th><th>姓名</th><th>爱好</th></tr><tr><td><input type="checkbox" name="" id="" value="1001" /></td><td>cxk</td><td>唱、跳、rap、打籃球</td></tr><tr><td><input type="checkbox" name="" id="" value="1002" /></td><td>周瑜</td><td>打蓝球</td></tr><tr><td><input type="checkbox" name="" id="" value="1003" /></td><td>贾宝玉</td><td>渣男、撩妹</td></tr><tr><td><input type="checkbox" name="" id="" value="1004" /></td><td>猪八戒</td><td>背媳妇、吃西瓜</td></tr></table></body><script type="text/javascript">//实现全选全选功能$(function(){//onload函数
//          当点击第二个checkbox是，获取其状态，并复制给其他input$("input:eq(1)").click(function(){var  flag=$("input:eq(1)").prop("checked");//alert($("input").length);for(var i=1;i<$("input").length;i++){$($("input")[i]).prop("checked",flag);}    })//点击 批量删除，如果 $("#deletes").click(function(){var str="";//var count=$("input:gt(1)").length;//alert(count);for(var i=0;i<$("input:gt(1)").length;i++){//遍历所有可以删除的input框if($($("input:gt(1)")[i]).prop("checked")){//如果选中，则删除，并显示str+=$($("input:gt(1)")[i]).val()+",";//alert($($("input:gt(1)")[i]).val());$($("tr:gt(0)" )[i]).remove(); //i--;//因为每删除一个tr。tr的下表会变化}}if(str.length==0){alert("你还没有选择要删除的数据");}else{alert(str);}});});</script>
</html>

改变的方法：将上面的i–的注释去掉，就不会出现这个问题了。

Jquery使用Remove方法删除元素节点相关推荐

ArrayList中remove()方法删除元素之后下标重定位的问题
需求: 有一个ArrayList数组,要求删除长度大于5的字符串,如:arr = {"ab1","123ad","bca","da ...
jquery中remove()方法移除被选元素，包括所有的文本和子节点
jquery中remove方法移除被选元素,包括所有的文本和子节点定义和用法移除所有的元素移除html中指定id的元素内容定义和用法 remove() 方法移除被选元素,包括所有的文本和子节 ...
jquery追加html后删除,jquery动态增加删除元素节点
jquery动态增加删除元素节点对于语言编程,不同的思路有着不同的解决办法,Jquery对于动态的ul-li节点的增加删除实力操作思路: 1.做一个按钮用于增加li节点,使用Jquery:appen ...
jquery的DOM节点操作(删除元素节点)
1.删除元素节点在操作页面时,删除多余或者指定的页面元素是非常必要的. jquery中提供了remove()方法来删除元素. 其语法格式如下: 删除元素节点示例代码: <!DOCTYPE ht ...
html点击按钮清空元素,jQuery怎么删除元素节点
jquery删除元素节点的方法非常简单,我们可以直接通过remove()方法来进行删除节点操作. 下面我们就结合简单的代码示例,给大家详细介绍jquery删除节点元素的方法. 代码实例如下: jque ...
jquery tr 移除背景色_用jQuery remove()方法删除表格行(table tr)的写法
jQuery删除表行(table tr):本文介绍如何删除选定的表行(table tr).如何用jQuery按钮单击事件,按id或class-name删除表行. 在按钮单击时,我们删除选定的行/ tr ...
jquery 移除border_jQuery - 删除元素
通过 jQuery,可以很容易地删除已有的 HTML 元素. 删除元素/内容 remove() - 删除被选元素(及其子元素) empty() - 从被选元素中删除子元素 jQuery remove( ...
jQuery HTML 添加和删除元素
jQuery - 添加元素通过 jQuery,可以很容易地添加新元素/内容. 添加新的 HTML 内容的四个 jQuery 方法: append() - 在被选元素的结尾插入内容 prepend() ...
jquery 移除border_jQuery 删除元素
通过 jQuery,可以很容易地删除已有的 HTML 元素. 删除元素/内容如需删除元素和内容,一般可使用以下两个 jQuery 方法: remove() - 删除被选元素(及其子元素) empty ...

Jquery使用Remove方法删除元素节点

Jquery使用Remove方法删除元素节点相关推荐

最新文章

热门文章