How to Hide an HTML Element by Class using JavaScript?

Last Updated : 15 Oct, 2024

To hide an HTML element by class using JavaScript, the CSS display property can be manipulated.

Below are the approaches to hide an HTML element by class:

Table of Content

Approach 1: Using getElementsByClassName() selector

In this approach, getElementsByClassName() selector is used to select elements of a specific class. Indexing is used to get the element at the respective index. To get access to the CSS visibility property, We can use DOM style.visibility on the elements to set it to a hidden value.

Example: This example shows the use of the above-explained approach.

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> </head>  <body>     <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>         let 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: Using querySelectorAll() selectorIn 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: This example shows the implementation of the above-mentioned approach.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> </head>  <body>     <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>         let down = document.getElementById('GFG_DOWN');          function GFG_Fun() {             document.querySelectorAll('.child1')[0].                 style.visibility = 'hidden';             down.innerHTML = "Element is hidden";         }     </script> </body>  </html>

Output:

Approach 2: Using querySelectorAll() selector

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: This example shows the implementation of the above-mentioned approach.

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> </head>  <body>     <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>         let down = document.getElementById('GFG_DOWN');          function GFG_Fun() {             document.querySelectorAll('.child1')[0].                 style.visibility = 'hidden';             down.innerHTML = "Element is hidden";         }     </script> </body>  </html>

Output:

How to Filter a DIV Element Based on its Class Name using JavaScript?

PranchalKatiyar

Improve

Article Tags :

How to Hide an HTML Element by Class using JavaScript?

Approach 1: Using getElementsByClassName() selector

Approach 2: Using querySelectorAll() selector

Similar Reads