Hide all elements of a class in a dom using jquery

I am trying to hide all elements of classing in a dom using jquery.

In my case this works:

document.getElementsByClassName('hc-block hc-theme-nice-link hc-nowrap')[6].style.visibility='hidden'

but I want to hide all the elements (not just the 7-th one) and I would like to use Jquery

Tried this:

$(".hc-block hc-theme-nice-link hc-nowrap").css("visibility", "hidden");

but it does not work... Really dont understand why???

Solution 1:

Your jquery selector will need class to define with ., and you want to select element with all mentioned class so do not add space between them. Try like below.

$(".hc-block.hc-theme-nice-link.hc-nowrap").css("visibility", "hidden");

Solution 2:

You forget to add . before all class and remove whitespace " " between them. Here down is example.

$("#btn").click(function() {
       $(".hc-block.hc-theme-nice-link.hc-nowrap").css("visibility", "hidden");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="hc-block hc-theme-nice-link hc-nowrap">This is first paragraph.</span>
<input type="button" id="btn" value="click" />