How do I hide an html element on a specific page that already has the style (visibility: visible) and only if the child has a certain class – WordPress

I have content/posts that are shown in a grid on one webpage from which a user can choose and subsequently be taken to that specific content on another page. I have the same grid of content/posts on six different pages. On each page I want to filter out content based on a specific class.

Each item in the grid is already styled "visible" I suspect by the plugin I’m using.

In the example below, the class I want to use to filter the content is "ld_topic_category-video-interaction-a1". The element I want to hide is the specific "item grid-1" which is connected to "ld_topic_category-video-interaction-a1".

<div class="item grid-1" style="visibility: visible;">
    <article id="post-2637" class="post post-2637 sfwd-topic type-sfwd-topic status-publish hentry ld_topic_category-video-interaction-a1 user-has-not-earned"...</article>
</div>

I’ve tried the following code:

jQuery(document).ready(function($) {
$('ld_topic_category-video-interaction-a1').each(function(){
       if($(this).hasClass("ld_topic_category-video-interaction-a1")){
        $(this).parent().css("display", "none");
       }
});
});

As well as:

jQuery(document).ready(function($) {
$('ld_topic_category-video-interaction-a1').each(function(){
       if($(this).hasClass("ld_topic_category-video-interaction-a1")){
        $(this).parent().hide();
       }
});
});

And this:

var elements = document.getElementsByClassName('ld_topic_category-video-interaction-a1');

for(let i=0; i< elements.length; i++){
    elements[i].style.display = "none";
}

Also this:

jQuery(document).ready(function($) {
$('.item.grid-1').each(function(){
       if($(this).hasClass("ld_topic_category-video-interaction-a1")){
        $(this).parent().css("display", "none");
       }
});
});

Any suggestions would be greatly appreciated. Please let me know if there is any other info I need to provide.

Thanks