资讯专栏INFORMATION COLUMN

removeChild踩坑记

xuexiangjys / 1715人阅读

摘要:苹果梨草莓香蕉移除子节点我们要移除的子节点。随着子节点的个数增加,你会发现没被移除的子节点越多。打开浏览器就会发现循环每执行一次,的值都会减少。移除子元素长度一直再变化,其实每次移除的都是第一个子元素。

  • 苹果
  • 草莓
  • 香蕉
我们要移除ul的子节点li。用removeChild的话,惯性思维我会这样:
 function remove() {
   var list = document.getElementById("list");
   var li = list.getElementsByTagName("li");
   for (var i = 0; i < li.length; i++) {
     list.removeChild(li[i]);
   }
 }
这时,我会发现,每次移除都不彻底。随着子节点的个数增加,你会发现没被移除的子节点越多。 每次剩余的子节点都是总个数的一半。
打开浏览器debug就会发现:循环每执行一次,li.length的值都会减少1。这个正是我没办法完全移除子节点的原因。removeChild移除子元素长度一直再变化,其实每次removeChild移除的都是第一个子元素。所以,相应的,我们只要简单的把for循环做下调整:
  for (var i = 0; i < li.length;) {
     list.removeChild(li[i]);
  }
这样,每次for循环删除的都是第一个子元素。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/100492.html

相关文章

  • webpack4 坑记

    最近偶然想学习下webpack的配置,于是走上了webpack4踩坑的不归路。。。 webpack4默认的特性: 配置默认初始化一些配置, 比如 entry 默认 ./src 开发模式和发布模式, 插件默认内置 CommonsChunk 配置简化 使用 ES6 语法,比如 Map, Set, includes 新增 WebAssembly 构建支持 如果要使用 webpack cli 命令,...

    lookSomeone 评论0 收藏0
  • react使用坑记(一)

    摘要:本文主要介绍在移动端项目中如何使用及其配置使用脚手架生成的项目,后运行弹出配置项,该命令不可逆哦。使用了作为计算依据,因此需要在中贴上以下代码,并没有使用淘宝的方案使用的设计图是的哦配置的按需加载当然了,你需要先。 本文主要介绍在react移动端项目中如何使用antd-mobile2及其配置 使用 create-react-app脚手架生成的项目,后运行npm run eject 弹出...

    toddmark 评论0 收藏0
  • react使用坑记(一)

    摘要:本文主要介绍在移动端项目中如何使用及其配置使用脚手架生成的项目,后运行弹出配置项,该命令不可逆哦。使用了作为计算依据,因此需要在中贴上以下代码,并没有使用淘宝的方案使用的设计图是的哦配置的按需加载当然了,你需要先。 本文主要介绍在react移动端项目中如何使用antd-mobile2及其配置 使用 create-react-app脚手架生成的项目,后运行npm run eject 弹出...

    _ang 评论0 收藏0
  • sessionStorge和localStorage的使用-坑记_09

    摘要:的使用属性允许你访问一个对象。它与相似,不同之处在于里面存储的数据没有过期时间设置,而存储在里面的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持,并且重新加载或恢复页面仍会保持原来的页面会话。 sessionStorge的使用 sessionStorage 属性允许你访问一个 session Storage 对象。它与 localStorage 相似,不同之处在于 lo...

    Jochen 评论0 收藏0

发表评论

0条评论

xuexiangjys

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<