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

Question

Here is the sample 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();
});

Instead of deleting child elements from a parent, I want to hide them each time. The remove method deletes the child elements one after another. However, with the display property, it only removes a single element and none after that even if the condition is met again.

How do I get the rest of child elements to hide, when letterFound is equal to null? It works with the remove method but not the display hidden. But I don't want to necessarily delete the child elements.

Answer 1

ol.lastChild is the last child of ol, even if it's already hidden. So you're just hiding the same element every time.

You need to find the last child that's still visible and hide that. You can do that by looping from the end of the childNodes list.

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