Hide all elements of a class in a dom using jquery-CodePudding

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???

CodePudding user response：

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");

CodePudding user response：

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 >This is first paragraph.</span>
<input type="button" id="btn" value="click" />

CodePudding user response：

You should address a class selector using .

It should be the list of classes with . without any space if all the classes are for the single node.

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

if the dom structure is as below.

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div >
  content
</div>

It should be the class elements seperated by if the elements are one inside another

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

if the dom structure is as below.

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div >
  <div >
    <div >
      content
    </div>
  </div>
</div>