How to hide div with class name in JavaScript

Question

I am trying to hide the visibility of this div class however javascript code that I have written didn't work.What should I do in this situation?

<div class="form-item webform-component webform-component-display webform-component--1-contact-1-bg20-custom-4">
  <label>Question? </label>
 Nein
</div>



<script>
document.getElementsByClassName("form-item webform-component webform-component-display webform-component--1-contact-1-bg20-custom-4").style.visibility = '"hidden";
</script>

It's not a class name having spaces. It's 4 different class names. — Jeremy Thille
– Jeremy Thille, Commented Oct 26, 2017 at 13:50

Sanchit Patiyal · Accepted Answer · 2017-10-26 14:38:00Z

2

There are three things

It's not a single classname having spaces, it's four different classes in a single div
You have put up an extra single quote before double cotes.
getElementsByCLassName returns an array so you need to specify index

Ideally, it should be

<div class="form-item webform-component webform-component-display webform-component--1-contact-1-bg20-custom-4">
<label>Question? </label>
Nein
</div>


<script>
document.getElementsByClassName("form-item")[0].style.visibility = "hidden";
</script>

Or if we write it your way

<div class="form-item webform-component webform-component-display webform-component--1-contact-1-bg20-custom-4">
<label>Question? </label>
Nein
</div>


<script>
document.getElementsByClassName("form-item webform-component webform-component-display webform-component--1-contact-1-bg20-custom-4")[0].style.visibility = "hidden";
</script>

You were missing index to be specified after getElementsByClassName and additional '

edited Oct 26, 2017 at 14:38

answered Oct 26, 2017 at 13:54

Sanchit Patiyal

4,9301 gold badge16 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mr. Greenwoodz Over a year ago

You forgot that getElementsByClassName returns an array-like object, so it should be document.getElementsByClassName("form-item")[0].style.visibility = "hidden";

Sanchit Patiyal Over a year ago

@Mr.Greenwoodz yeah I was updating it . Thanks

Nandu Kalidindi · Accepted Answer · 2017-10-26 14:09:25Z

0

document.getElementsByClassName will return you an array of elements. So if you are sure that you just have one element with that combination of classes then you can try

 document.getElementsByClassName
 ("form-item webform-component webform-component-display 
   webform-component--1-contact-1-bg20-custom-4")[0].style.visibility = "hidden";

edited Oct 26, 2017 at 14:09

answered Oct 26, 2017 at 13:56

Nandu Kalidindi

6,2901 gold badge28 silver badges38 bronze badges

2 Comments

Jeremy Thille Over a year ago

The trouble is that OP believes "form-item webform-component webform-component-display webform-component--1-contact-1-bg20-custom-4" is one class name with spaces.

Nandu Kalidindi Over a year ago

@Jeremy Thille, your comment on the question should get him to check back on the difference, hopefully. Thanks for that @RogerC!

Collectives™ on Stack Overflow

How to hide div with class name in JavaScript

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related