Remove（） 函数在 for 循环 JavaScript 中无法正常工作 [duplicate]

问：

我正在尝试编写一个函数，当单击按钮时，它通过循环遍历父元素的子元素，仅从父元素中删除某些元素，然后将父元素的 display 属性设置为 none。我遇到了一个问题，即某些元素被删除，而有些元素即使不符合删除条件也不被删除。 这是我的代码：

function closePopUp() {


    var children = document.getElementById('pack-opened').childNodes;

    for (let i = 0; i < children.length; i++) {
        const child = children[i];
        if (child.id != "card" && child.id != "close" && child.id != null) {
            child.remove()
        }
    }

    document.getElementById('pack-opened').classList.add('d-none');



}

我想也许问题在于，我想删除的大多数孩子都是使用克隆功能克隆的，但其中一些仍然被删除，而另一些则没有。

这是我用来克隆的代码：（res 只是一个具有某些属性的 json 对象）

for (let j = 0; j < res.length; j++) {
        const element = res[j];
        var card = document.getElementById("card")
        var clone = card.cloneNode(true);
        clone.id = "card" + j;
        clone.getElementsByClassName("hero-image")[0].src = getPic(element, "portrait_xlarge")
        clone.getElementsByClassName("sup-name")[0].innerHTML = element.name.toUpperCase()
        clone.getElementsByClassName("front-img")[0].setAttribute("style", "background-image:  url(" + "'" + getPic(element, "portrait_xlarge") + "'" + ")   ");
        card.after(clone)
        clone.classList.remove("d-none")

    }

这是触发该函数的html代码，我也尝试使用事件侦听器，但结果是一样的：

<div id="pack-opened" class="container-fluid bg-white pack-opened text-center p-5 d-none">
        <div id="card" class=" frame d-none" data-tilt data-tilt-axis="x">
            <div class="img-box rounded-1 "><img class="hero-image" src="" alt="">

            </div>

            <div class="d-flex justify-content-center">
                <div class="front-img"></div>

                <div class="sup-name"> </div>

            </div>
        </div>
        <div id="closebtn"> <button class="btn btn-danger marvred marvel-font" onclick="closePopUp()">CLOSE</button>
        </div>

    </div>

通过在删除子元素之前和之后记录子变量，结果是：

我尝试了不同的方法，例如 remove（） 和 removechild（） 以及使用 children 集合和 childNodes nodelist。我想知道问题是否出在我的 html 文档加载元素的方式上，这会导致仅删除其中一些元素。