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

Using getElementsByClassName() selector
Using querySelectorAll() selector

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.