Hide container div based on text of anchor url inside – with JS

October 6, 2022

I have a list of blog posts where the html has many nested divs that create the layout of it. I need to only hide the posts that contain a specific tag, so targeting the part of the url in the anchor that is /tag/hidetag/, then selecting then container class post of only those posts to be hidden, not all the other posts.

<div class="post">
    <div>
        <div>
            <div>
                <a href="https://mysite/mypost/">Title 1</a>
            </div>
            <div>
                <div>
                    <a href="http://mysite/tag/mytag/"></a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="post">
    <div>
        <div>
            <div>
                <a href="https://mysite/mypost/">Title 2</a>
            </div>
            <div>
                <div>
                    <a href="http://mysite/tag/hidetag/"></a>
                </div>
            </div>
        </div>
    </div>
</div>

>Solution :

This doesn’t need JavaScript. All you need to do is find the divs with "post" class that :has a tag that contains "/tag/hidetag/":

.post:has(a[href*="/tag/hidetag/"]) {
  display: none;
}

<div class="post">
    <div>
        <div>
            <div>
                <a href="https://mysite/mypost/">Title 1</a>
            </div>
            <div>
                <div>
                    <a href="http://mysite/tag/mytag/"></a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="post">
    <div>
        <div>
            <div>
                <a href="https://mysite/mypost/">Title 2</a>
            </div>
            <div>
                <div>
                    <a href="http://mysite/tag/hidetag/"></a>
                </div>
            </div>
        </div>
    </div>
</div>