时间戳

首页 > 解决方案 > Javascript removeChild 没有删除循环内的所有元素

javascript - Javascript removeChild 没有删除循环内的所有元素

问题描述

我想做什么-

  1. 通过javascript从DOM中获取特定类的所有元素
  2. 从元素的父元素获取img元素
  3. img在父元素之前插入元素
  4. 移除父元素

这是代码：

let elms = el.getElementsByClassName("my-class");
console.log(elms) // 6 elements are printed here
for (let elm of elms) {
    console.log("Inside loop") //only printed 3 times
    let elm_parent = elm.parentNode;
    let img_elm = elm_parent.getElementsByTagName("img");
    elm.parentNode.parentNode.insertBefore(img_elm[0], elm_parent);
    elm.parentNode.parentNode.removeChild(elm_parent);
} 
//Loop only executes 3 times

这是 HTML 的结构（总共有 6 个这样的元素）：

<p>
    <div style="position: relative; display: block;">
        <img src="http://something.com/image1" style="display: block;">
        <div></div><svg class="my-class" viewBox="0 0 341 102">
            <g>
                <g class="a9s-selection" style="pointer-events: none;">
                    <rect class="outer" x="-1.5" y="58" width="147" height="40"></rect>
                    <rect class="inner" x="-1.5" y="58" width="147" height="40"></rect>
                </g>
            </g>
        </svg>
    </div>
    <br>
</p>

如您所见，虽然elms有 6 个元素，但循环只执行了 3 次。谁能帮我理解为什么会这样？

标签： javascripthtmlvue.jsdom

解决方案

问题：通过引用对象调用。

当你这样做时el.getElementsByClassName("my-class");，它会给你一个HTMLCollection看起来像一个数组的活动对象。由 DOM 本身处理。如果你从 DOM 中删除任何存在于HTMLCollection长度中的东西，它HTMLCollection也会减少。

HTMLCollection解决方案：以数组的形式创建一个副本。

let elms = el.getElementsByClassName("my-class");
elms = Array.from(elms);

推荐阅读