How do I hide an html element on a specific page that already has the style (visibility: visible) an-CodePudding

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  style="visibility: visible;">
    <article id="post-2637" ...</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

CodePudding user response：

CSS Visibility and Display properties are not the same. Please refer to the link below: https://www.tutorialrepublic.com/css-tutorial/css-visibility.php#:~:text=CSS Visibility vs,affect the layouts.

If you want to stick with visibility style you can do this instead to hide the element:

$(this).parent().css("visibility", "visible"); //this is to make element visible again 
$(this).parent().css("visibility", "hidden"); //this is to make element hidden

Refer to this answer for more info on CSS Visibility: Equivalent of jQuery .hide() to set visibility: hidden

If you wanna stick with your jquery code however, you can instead make do with Display property:

<div  style="display:block;"> //to show the element
     <article id="post-2637" ... 
     </article>
</div>

<div  style="display:none;"> //to hide the element
     <article id="post-2637" ... 
     </article>
</div>

I hope this helps.

CodePudding user response：

could you use display: none to hide the items of the grid you don't want?