如何隐藏子元素而不是使用纯 Javascript 删除？答案

【问题标题】：How to hide child elements instead of deleting using plain Javascript?如何隐藏子元素而不是使用纯 Javascript 删除？
【发布时间】：2019-06-20 02:19:42
【问题描述】：

这里是示例 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 方法一个接一个地删除子元素。但是，使用 display 属性，即使再次满足条件，它也只会删除单个元素，之后不会删除。

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

【问题讨论】：

如果其中一个答案有助于解决您的问题，请不要忘记选择它作为您问题的答案

标签： javascript hide parent-child children removechild

【解决方案1】：

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

您需要找到最后一个仍然可见的子节点并将其隐藏。您可以通过从 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;
    }
}

【讨论】：

【解决方案2】：

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

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

【讨论】：

我宁愿只用 javascript 来做这件事。
这并不能解决将类添加到适当元素的问题。 ol.lastChild 已经上课了。
我进行了修改以改进我的答案并正确解决问题。