How to Hide an HTML Element by Class using JavaScript ? - GeeksforGeeks

02 Mar, 2020
Suppose you have given an HTML document and the task is to hide an HTML element by its class name with the help of JavaScript. There are two approaches to explain with the proper example.
Approach 1: In this approach, getElementsByClassName() selector is used to select elements of specific class. Indexing is used to get the element at respective index. To get the access to the CSS visibility property, We can use DOM style.visibility on the elements to set it to hidden value.
Example:<!DOCTYPE HTML><html>  <head>    <title>        How to hide an HTML element        by class in JavaScript    </title>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script>    <style>        body {            text-align: center;        }                  h1 {            color: green;        }                  .geeks {            color: green;            font-size: 24px;            font-weight: bold;        }    </style></head>  <body>    <h1>         GeeksforGeeks     </h1>    <b>         Click on button to hide the element         by class name    </b>    <br>    <div class="outer">        <div class="child1">Child 1</div>        <div class="child1">Child 1</div>        <div class="child2">Child 2</div>        <div class="child2">Child 2</div>    </div>    <br>    <button onClick="GFG_Fun()">        click here    </button>    <p id="geeks">    </p>    <script>        var down = document.getElementById('GFG_DOWN');          function GFG_Fun() {            document.getElementsByClassName('child1')[0].            style.visibility = 'hidden';            down.innerHTML = "Element is hidden";        }    </script></body>  </html>
<!DOCTYPE HTML><html>  <head>    <title>        How to hide an HTML element        by class in JavaScript    </title>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script>    <style>        body {            text-align: center;        }                  h1 {            color: green;        }                  .geeks {            color: green;            font-size: 24px;            font-weight: bold;        }    </style></head>  <body>    <h1>         GeeksforGeeks     </h1>    <b>         Click on button to hide the element         by class name    </b>    <br>    <div class="outer">        <div class="child1">Child 1</div>        <div class="child1">Child 1</div>        <div class="child2">Child 2</div>        <div class="child2">Child 2</div>    </div>    <br>    <button onClick="GFG_Fun()">        click here    </button>    <p id="geeks">    </p>    <script>        var down = document.getElementById('GFG_DOWN');          function GFG_Fun() {            document.getElementsByClassName('child1')[0].            style.visibility = 'hidden';            down.innerHTML = "Element is hidden";        }    </script></body>  </html>
Output:
Approach 2: In this approach, querySelectorAll() selector is used to select elements of specific class. Indexing is used to get the element at respective index. To get the access to the CSS visibility property, We can use DOM style.visibility on the elements to set it to hidden value.
Example:<!DOCTYPE HTML><html>  <head>    <title>        How to hide an HTML element        by class in JavaScript    </title>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script>    <style>        body {            text-align: center;        }                  h1 {            color: green;        }                  .geeks {            color: green;            font-size: 24px;            font-weight: bold;        }    </style></head>  <body>    <h1>         GeeksforGeeks     </h1>    <b>         Click on button to hide the element         by class name    </b>    <br>    <div class="outer">        <div class="child1">Child 1</div>        <div class="child1">Child 1</div>        <div class="child2">Child 2</div>        <div class="child2">Child 2</div>    </div>    <br>    <button onClick="GFG_Fun()">        click here    </button>    <p id="geeks"></p>      <script>        var down = document.getElementById('GFG_DOWN');          function GFG_Fun() {            document.querySelectorAll('.child1')[0].            style.visibility = 'hidden';            down.innerHTML = "Element is hidden";        }    </script></body>  </html>
<!DOCTYPE HTML><html>  <head>    <title>        How to hide an HTML element        by class in JavaScript    </title>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script>    <style>        body {            text-align: center;        }                  h1 {            color: green;        }                  .geeks {            color: green;            font-size: 24px;            font-weight: bold;        }    </style></head>  <body>    <h1>         GeeksforGeeks     </h1>    <b>         Click on button to hide the element         by class name    </b>    <br>    <div class="outer">        <div class="child1">Child 1</div>        <div class="child1">Child 1</div>        <div class="child2">Child 2</div>        <div class="child2">Child 2</div>    </div>    <br>    <button onClick="GFG_Fun()">        click here    </button>    <p id="geeks"></p>      <script>        var down = document.getElementById('GFG_DOWN');          function GFG_Fun() {            document.querySelectorAll('.child1')[0].            style.visibility = 'hidden';            down.innerHTML = "Element is hidden";        }    </script></body>  </html>
Output:
CSS-Misc
HTML-Misc
JavaScript-Misc
CSS
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
How to set space between the flexbox ?
How to Upload Image into Database and Display it using PHP ?
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
HTML Cheat Sheet - A Basic Guide to HTML
REST API (Introduction)
How to Insert Form Data into Database using PHP ?