JS：如何根据子div的内容隐藏具有多个嵌套div的父div

Question

Here's the code I'm looking at:

<div class="blotter_workshopitempublished blotter_entry">
    <div class="blotter_author_block">
        <div class="blotter_avatar_holder">
            <a href="https://steamcommunity.com/profiles/steam_profile_id">
                <div class="playerAvatar online">
                    <img src="https://steamcdn-a_medium.jpg" data-miniprofile="number">
                    </div>
                </a>
            </div>
            <div>
                <a href="https://steamcommunity.com/profiles/steam_profile_id" data-miniprofile="number">nickname</a>
            </div>
            <div>
            added an item to their favorites        </div>
        </div>

I'd like to hide all occurrences of "blotter_workshopitempublished blotter_entry" based on "steam_profile_id" or "nickname" (one or the other, I don't care, but "id" would be better), which are inside nested divs.

I looked at several other similar questions but still need help; I'll use this inside a Tampermonkey script.

Thanks

Answer 1

Something like this should help:

const blotters = document.querySelectorAll('.blotter_workshopitempublished.blotter_entry');

blotters.forEach(blotter => {
    const id = blotter.querySelector('a').href.split('/').pop();
    if (id === "put whatever id you want to hide in here") {
        blotter.style.display = "none";
    }
});