如何隐藏子元素而不是使用普通 Javascript 删除？

Question

这是示例 Javascript:

qwertyID.addEventListener('click', (e)=>{
    let button=e.target;
    button.classList.add("chosen");
    button.disabled="true";
    let letterFound=checkLetter(button);
    ol=document.getElementsByTagName('OL')[0];
    if (letterFound==null) {
        ol.lastChild.style.display="none";
        missed+=1;
    }
    checkWin();
});

我不想从父元素中删除子元素，而是希望每次都隐藏它们。 remove 方法一个接一个地删除子元素。但是，显示属性时，即使再次满足条件，它也只会删除单个元素，然后再删除 none 。

当 letterFound 等于 null 时，如何隐藏其余的子元素？它适用于 remove 方法，但不适用于隐藏的显示。但是我不想一定要删除子元素。

Answer 1

就像 Barmar 所说的，你总是隐藏最后一个元素，但你实际上不需要遍历你的元素来找到最后一个隐藏的元素，因为你已经在跟踪玩家错过的次数.

if (letterFound==null) {
    ol.childNodes[childNodes.length - 1 - missed].style = "none";
    missed += 1;
}

Answer 2

ol.lastChild 是 ol 的最后一个 child，即使它已经被隐藏。所以你只是每次隐藏相同的元素。

您需要找到最后一个仍然可见的 child 并将其隐藏。您可以通过从 childNodes 列表的末尾开始循环来做到这一点。

for (let i = ol.childNodes.length - 1; i >= 0; i--) {
    if (ol.childNodes[i].style.display != "none") {
        ol.childNodes[i].style.display = "none";
        break;
    }
}

如何隐藏子元素而不是使用普通 Javascript 删除？

How to hide child elements instead of deleting using plain Javascript?

javascript

hide

parent-child

children

removechild