【注意】js 里面 removeChild 使用的坑

最新推荐文章于 2023-06-26 22:22:38 发布

原创最新推荐文章于 2023-06-26 22:22:38 发布 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

38 篇文章

订阅专栏

本文深入探讨了在使用DOM操作时常见的误区与正确实践，包括循环删除子元素的正确方式、元素绑定事件的注意事项以及如何避免事件绑定丢失等问题。

这有坑啊，使用removeChild 循环删除子元素们的时候是【0】而不是【i】

这是因为你每次删完一个子元素们的下标就会发生改变

比如 allSpan【0】 allSpan【1】

removeChild(allSpan【0】) 以后，allSpan【1】就不再是 allSpan【1】了，而变成了allSpan【0】；

所以需要删除 allSpan【0】 N次就好了。

另外

找不到爹，想删除自己的时候，可以先找一下父级，再进行删除

当然删除自己也可以使用自己.remove

另另外

如果删除了父级元素，那么子集元素是不会被保留的~~~

倾巢之下，岂有完卵！！！

另另另外

div2 是 div1 的孩子，当div1 .innerHTML 发生改变的时候，他会先清空在他名下的元素，所以导致了div1 的子元素 div2 之前绑定的事件也失效了，所以。。。

【解决方案】

先给div1 的innerHTML赋值，然后在做其他绑定事件。。。

或者是使用事件委托 ~~~

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

晓秒四下

关注关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

JavaScript 性能优化实战：从 “卡顿列表” 到 “丝滑交互”，我踩过的坑和总结的招

lamehsl的专栏

10-29

925

本文针对电商项目中的JavaScript性能问题，提供了一套实战优化方案。文章首先强调定位问题比盲目优化更重要，推荐使用Chrome DevTools和console.time()精准定位性能瓶颈。随后列举5个高频优化场景：1)DOM操作的批量处理减少重排；2)循环中的重复计算优化；3)事件委托减少绑定；4)内存泄漏预防；5)数据缓存避免重复计算。每个优化方案都配有具体代码示例和性能对比数据，如列表滚动帧率从25fps提升到52fps。最后提出性能优化的三个核心原则：精准定位、避免过早优化、以用户体验为准。

pixi.js淘宝小程序快速上手指南

Hoitsuhan的博客

09-30

1938

Pixi.JS淘宝小程序快速上手指南 1.Pixi.JS基本介绍 Pixi.JS是一个2d渲染引擎

1 条评论您还未登录，请先登录后发表或查看评论

1 条评论

anywo01 2021.04.14
所以说vue好呢

js removeChild 障眼法可能出现的错误

hhf1029的专栏

12-05

1198

js removeChild 障眼法之可能出现的错误，大家看下代码就知道了。有结构：复制代码代码如下: a b c 如果运行代码1：复制代码代码如下: var ul = document.getElementById('demo'); var liList = ul.getElementsByTagName('li

js中的removeChild问题求助

IT_Bired的博客

12-06

673

求助求助求助为什么第二次点击不行

js删除节点的坑（删不完）,以li为列

m0_53313913的博客

07-22

373

删了一部分顺着删 let chils=list.childNodes;//获取子节点集合 let length=chils.length; for(let i=0;i<length;i++){ list.removeChild(chils[i]); } 完成操作删完倒着删 let chils=list.childNodes;//获取子节点集合 let length=chils.length;

js removeChild 的bug

aqj1234的博客

07-16

183

直接用removeChild删除元素好像有bug 故要找到其父节点然后删除此节点 var div = document.getElementById("XX");div.parentNode.removeChild(div); 转载于:https://www.cnblogs.com/gfqFighting/archive/2012/07/16/2594141.html...

js-removeChild()

欢迎留言~

04-09

6784

下面给大家介绍Javascript removeChild()删除节点的方法，具体详情如下所示：在Javascript中，只提供了一种删除节点的方法：removeChild()。 removeChild() 方法用来删除父节点的一个子节点。语法： parent.removeChild(thisNode) 例如，删除 id=“demo” 的节点的语句为： var thisNode=docume...

JavaScript 逆向 ( 一 ) --- JavaScript 语法基础

墨鱼菜鸡

07-11

1369

js 逆向：https://www.cnblogs.com/wuxianyu/category/1940304.html js逆向2：https://www.cnblogs.com/wuxianyu/category/1941486.html JS 中的类型转换：https://segmentfault.com/a/119000001367922...

JavaScript最全面试题

qq_60976312的博客

06-10

1699

JavaScript最全面试题

js_模拟动态生成表格

weixin_46323591的博客

05-26

956

1.首先表格内容是不确定的，标题th不变, 所以我们给个宽度就行， 2.标题th不变，所以只管td, 第一步：既然内容不确定，所以我们不在在HTML结构上写td，只写一个tbody，为什么？我们可以往里面创建添加 tr、td 元素节点，第二步: 我们首先要确定行数，怎么实现？我们可以这样，把内容以对象的形式存放到数组里，而数组的"长度"就是我们的所求表格的“行数”，跟数组一样，每个对象之间用逗号隔开第三步：就是往里面添加元素节点，往谁添加？当然是往tbody添加，所以要把tbody获取过来

javascript 中removeChild()用法

做一个有理想的程序员

04-07

5339

removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。语法: nodeObject.removeChild(node) 参数: node ：必需，指定需要删除的节点。例子：无标题文档 html php javascript jquery java

Javascript removeChild()删除节点及删除子节点的方法

热门推荐

qq_34093387的博客

10-14

2万+

下面给大家介绍Javascript removeChild()删除节点的方法，具体详情如下所示：在Javascript中，只提供了一种删除节点的方法：removeChild()。 removeChild() 方法用来删除父节点的一个子节点。语法： parent.removeChild(thisNode) 参数说明：参数说明 thisNode 当前节点，即要删除的节点 parent 当前节点的父节点，即 thisNode.parentNode 例如，删...

JS使用removeChild 删除元素节点

又是再见?

06-21

7182

<html test 删除橘子草莓哈密瓜苹果葡萄猕猴桃 var ulObj = document.getElementsByClassName("ul")[0]; var btn2Obj = document.getElementById("btn2"); btn2Obj.onclick=functi

(转载)Javascript removeChild()不能删除全部子节点的解决办法

weixin_30394633的博客

07-16

827

在Javascript中，只提供了一种删除节点的方法：removeChild()。removeChild() 方法用来删除父节点的一个子节点。语法： parent.removeChild(thisNode) 参数说明：参数说明 thisNode 当前节点，即要删除的节点 parent 当前节点的父节点，即 thisNode.parentNo...

【Javascript】remove()删除当前节点和removeChild()删除子节点用法

学习记录总结分享

06-26

4376

介绍Javascript removeChild()删除子节点的方法，具体详情如下所示：在Javascript中，。

JS-删除节点removeChild()/替换元素节点replaceChild()/创建元素节点createElement/创建文本节点createTextNode/浏览器窗口可视区域大小/网页......

Jennyni1122的博客

06-18

2067

删除节点removeChild() removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。语法: nodeObject.removeChild(node) 参数: node ：必需，指定需要删除的节点。我们来看看下面代码，删除子点。 image.png 运行结果: HT...

js中cloneNode()和removeChild()实现添加和删除文件上传域

天道酬勤

08-10

3546

我想实现的效果是：在多个上传文件时，单击添加何以增加一个文件上传域，单击删除可以删除一个文件上传域。用js实现的代码： function insertRow(){ var rowindex = document.all("addordel").length;

使用removeChild时注意

lanting1018的专栏

04-03

2051

今天因为一个小问题确搞了好久，问题就出在removeChild上。根据项目的需要，之前动态添加的表单内容现在要动态的删除掉，我就想当然的使用document.getElementsByName()取到相应的表单内容给以个数组变量，然后根据这个数组变量的长度用一个for循环去removeChild。我认为很正常的程序变得很不正常，removeChild后的结果发现只能remove掉一

removeChild踩坑记

weixin_34208283的博客

12-28

767

<ul id="list"> <li>苹果</li> <li>梨</li> <li>草莓</li> <li>香蕉</li> </ul> <button onclick="remove()">移...

removechild使用

最新发布

12-11

`removeChild` 是 DOM（文档对象模型）中用于移除子节点的方法。它通常用于操作 HTML 文档中的元素节点。以下是 `removeChild` 方法的详细介绍和使用示例： ### `removeChild` 方法介绍 `removeChild` 方法用于从父节点中移除指定的子节点。该方法属于父节点对象，通过父节点调用，并接收要移除的子节点作为参数。 ### 语法 ```javascript parentNode.removeChild(childNode); ``` - `parentNode`：要移除子节点的父节点。 - `childNode`：要移除的子节点。 ### 使用示例假设有以下 HTML 结构： ```html <div id="parent"> <p id="child">这是一个子节点</p> </div> ``` 我们可以使用 JavaScript 来移除这个子节点： ```javascript // 获取父节点 var parent = document.getElementById("parent"); // 获取要移除的子节点 var child = document.getElementById("child"); // 移除子节点 parent.removeChild(child); ``` ### 注意事项 1. **父节点必须存在**：要移除子节点，必须确保父节点存在且正确获取。 2. **子节点必须是父节点的直接子节点**：要移除的子节点必须是父节点的直接子节点，而不是孙节点或其他后代节点。 3. **移除后的节点仍然存在**：被移除的节点仍然存在于内存中，可以重新添加到 DOM 中。 ### 重新添加被移除的节点被移除的节点可以通过 `appendChild` 或 `insertBefore` 方法重新添加到 DOM 中： ```javascript // 重新添加被移除的节点 parent.appendChild(child); ``` ### 完整示例以下是一个完整的示例，展示如何使用 `removeChild` 方法移除一个子节点并重新添加它： ```html <!DOCTYPE html> <html> <head> <title>removeChild 示例</title> </head> <body> <div id="parent"> <p id="child">这是一个子节点</p> </div> <button onclick="removeChildNode()">移除子节点</button> <button onclick="addChildNode()">重新添加子节点</button> <script> function removeChildNode() { var parent = document.getElementById("parent"); var child = document.getElementById("child"); parent.removeChild(child); } function addChildNode() { var parent = document.getElementById("parent"); var child = document.getElementById("child"); parent.appendChild(child); } </script> </body> </html> ``` 通过这个示例，你可以点击按钮来移除和重新添加子节点。