html - How to hide div with class name in JavaScript - Stack Overflow

admin管理员组

文章数量:1431391

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-ponent webform-ponent-display webform-ponent--1-contact-1-bg20-custom-4">
  <label>Question? </label>
 Nein
</div>



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

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-ponent webform-ponent-display webform-ponent--1-contact-1-bg20-custom-4">
  <label>Question? </label>
 Nein
</div>



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

• javascript
• html
• hide

Share Improve this question Follow edited Oct 26, 2017 at 14:22 Sanchit Patiyal 4,92011 gold badge1616 silver badges3131 bronze badges asked Oct 26, 2017 at 13:49 allstarallstar 2911 gold badge11 silver badge77 bronze badges 1

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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

There are three things

1. It's not a single classname having spaces, it's four different classes in a single div

2. You have put up an extra single quote before double cotes.

3. getElementsByCLassName returns an array so you need to specify index

Ideally, it should be

<div class="form-item webform-ponent webform-ponent-display webform-ponent--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-ponent webform-ponent-display webform-ponent--1-contact-1-bg20-custom-4">
<label>Question? </label>
Nein
</div>


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

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

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

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

本文标签： htmlHow to hide div with class name in JavaScriptStack Overflow