js根据ClassName来删除元素(有坑误入)

最新推荐文章于 2022-07-17 22:46:41 发布
最新推荐文章于 2022-07-17 22:46:41 发布
阅读量1.1k 收藏 1
点赞数 1
文章标签： javascript 数据结构与算法 ViewUI
原文链接：http://www.cnblogs.com/gdouzz/p/6591887.html
版权

    今天，被一个很简单的问题坑了一下午，基础不扎实。(js根据class名称来删除Dom元素）

    

   但是结果却不是这样的。弄了好久还不知道怎么回事。最后找到了答案。

    结果如下：为啥还有test2,4,6呢。

 

    现在要删除一个父节点的所有的子节点，删除节点的操作其实类似于FIFO链表，把第一个删除掉，第二个节点会补上作为第一个，第三个会补上做为第二个，以此类推

    所以做这种操作的时候，要倒着删除啊，切记。

    这个就是Js删除DOM节点的一个坑，请大家小心，误踩。JS根据ClassName来删除元素

    

    

转载于:https://www.cnblogs.com/gdouzz/p/6591887.html

weixin_30507269
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript通过className来获取元素的简单示例代码
10-26
在JavaScript中，我们可以利用`className`来筛选和操作具有特定类名的元素。以下是一个简单的示例，展示了如何通过类名获取元素： ```javascript function getElementsByClassName(n) { var classElements = [], ...
JS封装通过className获取元素的函数示例
10-20
主要介绍了JS封装通过className获取元素的函数,涉及javascript针对页面元素属性的遍历与数组相关操作技巧,需要的朋友可以参考下
使用js根据classname批量移除dom
以码会友
01-05 2354
先上代码： const arr = document.getElementsByClassName('classname'); const l = arr.length; for (let i = l - 1; i >= 0; i--) { if (arr[i] != null) { arr[i].parentNode.removeChild(arr[i]); } } 之前在论坛看到其他小伙伴用的正向遍历，即i++，试了下发现每次不能清除干净，总会漏掉几个。这是因为arr长度发.
js删除一个dom节点操作
淡淡的芦苇的博客
08-19 2014
<body> <div id="main"> <div id="box">111</div> <div class="box2">222</div> </div> <script type="text/javascript"> var box = document.getElementById("box"); var main = document.getElementById("main");.
js获取dom元素上所有的类名，添加类名，移除类名，切换类名(原生 js、 jquery)
Yujis的博客
06-20 8906
js获取dom元素的类名
JavaScript 删除Dom节点
weixin_47556601的博客
02-15 6838
大家好，今天我们来分享一下JavaScript 删除Dom节点 在JavaScript当中，删除节点的步骤： 先获取到父节点，再通过父节点来删除自己（子节点） 这里，提醒一下，自己不可以删除自己 看源码： ```bash <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head&gt
原生JS给DOM元素增加修改和删除class
热门推荐
sunshine的博客
03-11 2万+
之前一直使用jq，处理页面结构变化都很方便，不过在某些不实用jq的项目里，还是必须得知道如何使用原生JS去处理页面中简单的一些样式变化。这里介绍js针对css方面的一些基本操作。 &lt;html lang="en" dir="ltr"&gt; &lt;head&gt; &lt;style media="screen"&gt; .temp{ font-siz..
js通过classname来获取元素的方法
10-21
在JavaScript中，获取具有特定类名（classname）的元素是一项常见的任务，特别是在DOM操作和页面交互中。在原生JavaScript中，有多种方法可以实现这一功能。本文将详细讲解通过类名获取元素的方法，并提供相应的代码...
javascript 操作类名,className 属性实现添加、删除和替换
weixin_38551805的博客
04-12 1005
方法一 、 // 以下面的HTML代码为例： <div class="bd user disabled">...</div> // 要删除"user"类 let targetClass = "user" // 把类名拆分为数组 let classNames = div.className.split(/\s+/) // 找到要删除类名的索引 let idx = classNames.indexOf(targetClass) // 如果有就删除 if (idx > -1)
js通过className删除元素
奔跑的痕迹的博客
11-16 7107
有时候难免需要使用js进行 dom 操作；如在删除地图feature时同时得清除提示框 这个就需要使用 .parentNode.removeChild(元素) let chArr = document.body.getElementsByClassName("tooltip-static"); for(i=0;i<chArr.length;i++){ //删除元素 元...
Javascript 检测、添加、移除样式(className)函数代码
10-29
在前台脚本中，我们经常要操作页面元素的样式，比如标签页切换时，将当前标签加上一个样式，当切换到其他标签时，再将样式还原，本文介绍的是直接添加和移除 className 的方法。
原生js实现查找/添加/删除/指定元素的class
10-27
查找、添加、删除、指定元素的class使用原生js实现不可思议吧，感兴趣的朋友可以参考下哈，希望可以帮助到你
如何通过class和id使用原生js删除元素?
sophia_xiaoma的专栏
01-18 8421
//删除id for(i=0;i150;i++){ var idObject = document.getElementById('sidebar'); if (idObject != null) idObject.parentNode.removeChild(idObject); } //通过class获取元素 paras = document.ge
用JS添加和删除class类名
codingWeb的博客
08-01 5388
下面介绍一下如何给一个节点添加和删除class名 添加：节点.classList.add(“类名”)； 删除：节点.classList.remove(“类名”)； 以tab切换为例： 在写tab切换的时候，通常我们会给选中的tab设置不同的样式，常用的方法是给被选中的tab新增一个class名，然后改这个class名的样式。 比如 起一个class名叫“active” 设置样式 .active{ ...
javaScript 添加和移除class类名的几种方法
秋霜梦红尘的博客
07-27 8839
添加类属性： // 一次只能设置一个类值，如果当前属性本身存在类值，会被替换 element.className = '类名'; /* * .setAttribute 用来设置自定义属性和值的 * 自定义属性：原本标签中没有这个属性，为了存储数据，方便操作自己设置添加的。 * 自定义属性无法直接通过DOM对象的方式获取或设置 * 可以通过 .getAttribute 方法获取 * 因为"class"是系统自有的属性，所以直接传入"class"后也可以生效 */ element.setAttri
原生js删除增加修改class属性className
細水、長流√的专栏
05-19 5034
其实html5已经扩展了class操作的相关API，其中classList属性就以及实现了class的增删和判断。 HTML DOMclassList属性 classList属性的方法有： add(value) 添加类名，如果有则不添加 contains(value) 判断是否存在类名，返回Boolean值 remove(value) 从列表中删除类名 toggle(value) 切换类名：如果列表中存在则删除，否则添加 根据红宝书的介绍，目前支持classList属性的浏览器有Fi..
【DOM】获取元素的方式及增删改查
最新发布
webxuj的博客
07-17 211
lastElementChild。
原生js根据className 删除元素
yinyueyu007的博客
02-25 1249
let allCascade = document.getElementsByClassName("cascade"); for (let i = 0; i < allCascade.length; i++) { if (allCascade[i] != null) allCascade[i].parentNode.removeChild(allCascade[i]); }
js 集合中删除某个属性name-forEach(delete)、map(rest），forEach删除某一行属性（filter）, map获取index，angular6 *ngFor获取index
小武的博客
02-21 2244
1. 如果想删除tableData集合中的name属性，需要用forEach遍历tableData集合，然后在遍历过程中，直接调用delete item.name, 就可以把集合中的name属性删除掉 var tableData=[ { name:"小武", value:"a" }, { name:"小刘", ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值