使用removeChild时注意

最新推荐文章于 2023-09-07 10:30:31 发布

原创最新推荐文章于 2023-09-07 10:30:31 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

本文记录了一个关于使用removeChild删除动态添加的表单元素时遇到的问题。作者原本希望通过for循环遍历document.getElementsByName()获取的元素并逐个删除，却发现这种方法只删除了部分元素。文章详细解释了这一现象的原因，并提出了正确的解决办法。

今天因为一个小问题确搞了好久，问题就出在removeChild上。根据项目的需要，之前动态添加的表单内容现在要动态的删除掉，我就想当然的使用document.getElementsByName()取到相应的表单内容给以个数组变量，然后根据这个数组变量的长度用一个for循环去removeChild。我认为很正常的程序变得很不正常，removeChild后的结果发现只能remove掉一般的对象，并且是remove的对象是间隔的，比如，remove掉了1、3、5、7.。。，而2、4、6.。。。。还是存在的。经过n小时的查错（俺笨），才找到原因，原来每remove掉一个对象后，第一个对象是去掉了，原来的document.getElementsByName()得到的集合中的第二个对象变成了第一个，以此类推。其length也-1了，所以我for第二次循环时实际移除的是一开始的第3个对象，后面以此类推。听得懂么？？？哈哈，反正我明白就行了。

想必对DOM更加熟悉的人不会犯这种低级错误，不过我还很“嫩”哈哈哈哈哈，慢慢来吧

P.S:以后再通过循环使用removeChild时应该通过foreach来判断循环次数，这样就不会出错了。如果使用for的话，就每次都删第一个就ok了。