Как скрыть дочерние элементы вместо удаления с использованием простого 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 удаляет дочерние элементы один за другим.Однако со свойством display он удаляет только один элемент и ни один после этого, даже если условие выполняется снова.

Как заставить остальные дочерние элементы скрыть, когда letterFound равно нулю?Он работает с методом удаления, но не скрытым отображением.Но я не хочу обязательно удалять дочерние элементы.

Answer 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;
    }
}

Answer 2

Как сказал Бармар, вы всегда скрываете последний элемент, но вам на самом деле не нужно перебирать свои элементы, чтобы найти последний скрытый, потому что вы уже отслеживаете количество пропущенных игроком элементов.

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