Hiding DIV a few levels above another div if the lower div contains specific text

Question

I'm using a website to learn another spoken language. I'm far into the tree of the website (levels of knowledge) and It takes a few moments to scroll down to the part of the page where my next lesson is. I would like to hide the completed div elements and see only the incomplete items. (Duolingo)

There used to be a piece of javascript that I could click on in my bookmarks bar and it would do this automatically. But this has broken with the updates to the website.

I would like to create my own and simply need help figuring out how to get going in targeting my divs.

I am able to use getElementsByClassName to see the array of divs which are on the page.

<div class="QmbDT">
    <a class="Af4up" href="javascript:;">
        <div class="_2albn">
            <div class="_2969E">
                <div class="_39IKr">
                    <div class="_3zkuO" style="height: 106px; width: 106px;">
                        <div class="_3o9cS"><svg height="106" width="106">
                                <g transform="translate(53, 53)">
                                    <path
                                        d="M3.245314017740486e-15,-53A53,53,0,1,1,-3.245314017740486e-15,53A53,53,0,1,1,3.245314017740486e-15,-53M-8.266365894244634e-15,-45A45,45,0,1,0,8.266365894244634e-15,45A45,45,0,1,0,-8.266365894244634e-15,-45Z"
                                        fill="#e5e5e5"></path>
                                    <path class="_1IdLW"
                                        d="M3.245314017740486e-15,-53A53,53,0,1,1,-3.245314017740486e-15,53A53,53,0,1,1,3.245314017740486e-15,-53M-8.266365894244634e-15,-45A45,45,0,1,0,8.266365894244634e-15,45A45,45,0,1,0,-8.266365894244634e-15,-45Z"
                                        fill="#ffd900"></path>
                                </g>
                            </svg>
                        </div>
                    </div>
                </div><span class="_1z_vo _3hKMG ewiWc"><span class="_1S0M4 _3KBC1 _780Gf _9l65a _3aw24 MrbBK"></span>
                    <div class="_26l3y"><img alt="crown" class="_2PyWM"
                            src="//d35aaqx5ub95lt.cloudfront.net/images/juicy-crown.svg">
                        <div class="qLLbC">5</div>
                    </div>
                </span>
            </div>
            <div class="_21B3_"><span class="_378Tf _3qO9M _33VdW">Family 4</span></div>
        </div>
    </a>
</div>

I'm trying to target any .qLLbC which contains "5" and then "display: none;" on the div at the top of the section with class .QmbDT.

When I go to the console and enter document.querySelectorAll('.qLLbC') I get 159 in my nodelist. I need to get the ancestor div as indicated previously and hide anything where the qLLbC contains innerHTML of "5"

Answer 1

Can you run the following? As long as the QmbDT class is static, this should do what you're asking.

let parents = document.querySelectorAll('.QmbDT');

parents.forEach(i => {
   let val = parseInt(i.querySelector("div div span div div").innerText);
   if(val === 5) {
     i.style.display = 'none';
   }
})