javascript怎么实现选中删除
时间:2021-11-30
来源:互联网
标签:
今天PHP爱好者为您带来javascript实现选中删除的方法:1、使用js函数获取到所有的checkbox复选框;2、通过checked属性来得到复选框是否处于选中状态;3、通过parentNode属性来获得父节点;4、使用removeChild方法来删除即可。希望对大家有所帮助。

本文操作环境:windows7系统、javascript1.8.5版、DELL G3电脑
javascript怎么实现选中删除?
JS删除选中复选框, 原生JS代码
html代码如图,要注意的地方是checkbox里有一个class样式名。

删除按钮的事件代码,我们先使用js的函数document.getElementsByClassName来通过样式名来获取到所有的checkbox复选框。

获取到的复选框是一个数组,我们得到数组的长度,然后用for循环来处理,要注意的是需要从后往前来循环,不然在同时删除多个的时候会有问题的。

通过checked属性来得到复选框是否处于选中状态。

从选中的复选框里,通过parentNode属性来获得它的父节点,即对应的p元素。

再通过p的parentNode,获取到最上一层的父节点,这时就可以使用removeChild方法来删除子节点了,传入的参数就是对应的p节点。

运行页面,选中一个复选框,点击删除按钮,可以看到成功删除了选中的这个了。

选中多个复选框,再点击删除,同样可以删除多个。

以上就是javascript怎么实现选中删除的详细内容,更多请关注php爱好者其它相关文章!
-
USB Host接口有什么用?USB Host和USB Device接口的区别 时间:2025-12-16 -
HDMI怎么区分1.4和2.0?HDMI1.4和2.0的区别 时间:2025-12-16 -
com.android.phone已停止运行是什么意思?怎么解决? 时间:2025-12-16 -
4mp摄像头是多少像素?4mp和1080p有什么区别? 时间:2025-12-16 -
电脑出现normal.dotm错误怎么办?解决方法是什么? 时间:2025-12-15 -
normal.dotm在哪个文件夹里 如何删除normal模板 时间:2025-12-15
今日更新
-
欧易APP最新版本更新指南:简单几步轻松升级
阅读:18
-
三角洲行动官网入口-三角洲行动最新官网
阅读:18
-
动视如何绑定微软账号-Xbox账号绑定详细教程
阅读:18
-
欧易APP缓存清理指南:简单3步释放手机空间
阅读:18
-
想知道佩奇梗是什么梗吗?揭秘小猪佩奇爆火网络背后的趣味含义!
阅读:18
-
俄罗斯引擎yandex中文搜索直达入口-俄罗斯引擎yandex简体中文版快捷入口
阅读:18
-
微信文件传输助手网页版入口在哪 具体使用方法详解
阅读:18
-
暴雪战网安装失败提示无法验证数字签名?教你解决
阅读:18
-
修修漫画在线看-漫画入口页面更新!修修漫画网页版-在线观看高清入口
阅读:18
-
佩奇是什么梗揭秘这只网红小猪的爆火原因和背后故事
阅读:18










