Hide Element By Class In Pure Javascript Duplicate

When working on web projects, you may often find the need to manipulate elements on the page using JavaScript. One common task is hiding specific elements based on their class. In this article, we'll dive into how you can hide elements by class in pure JavaScript, without the need for any external libraries or frameworks.

To hide an element by its class name in JavaScript, we first need to select the target element using the `document.getElementsByClassName()` method. This method returns a collection of elements that have the specified class name. If you want to hide multiple elements with the same class, this method will be handy.

Here's a simple example to demonstrate how you can hide elements by class in pure JavaScript:

<title>Hide Elements by Class</title>


    <div class="hide-me">Element 1</div>
    <div class="hide-me">Element 2</div>
    <div class="dont-hide-me">Element 3</div>

    <button>Hide Elements</button>

    
        function hideElementsByClass() {
            var elements = document.getElementsByClassName('hide-me');
            for (var i = 0; i &lt; elements.length; i++) {
                elements[i].style.display = &#039;none&#039;;
            }
        }

In this example, we have three `div` elements on the page, two of which have the class name 'hide-me' and one with the class name 'dont-hide-me'. We also have a button that, when clicked, calls the `hideElementsByClass()` function.

Inside the `hideElementsByClass()` function, we first select all elements with the class name 'hide-me' using `document.getElementsByClassName('hide-me')`. We then loop through each element in the collection and set its `display` style property to 'none', effectively hiding the element from view.

It's worth noting that changing the `display` property to 'none' will hide the element without affecting the layout of the page, as if the element was never there.

By following this approach, you can dynamically hide elements by their class name using pure JavaScript. This method gives you flexibility and control over which elements to hide based on their classes, making it a valuable technique in your web development toolbox.

In conclusion, manipulating elements on a webpage with JavaScript is a powerful feature that allows for dynamic and interactive web experiences. Understanding how to hide elements by class in pure JavaScript expands your ability to create engaging and user-friendly web applications. So, the next time you need to hide specific elements on your webpage, reach for this technique to get the job done efficiently.