JavaScript – Hide HTML Element

To hide a HTML Element using JavaScript, get reference to this HTML Element, and assign value of "none" to the element.style.display property.

In the following example, we will hide the HTML Element with id "myElement" in JavaScript, using element.style.display property.

example.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #myElement {
            border:1px solid #CCC;
            width:100px;
            height:100px;
        }
    </style>
    <meta charset="utf-8">
</head> 
<body>
    <h2>Hide HTML Element using JavaScript</h2>
    <div id="myElement">Hello World!</div>
    <br>
    <button type="button" onclick="changeStyle()">Click Me</button>
    <script>
    function changeStyle(){
        var element = document.getElementById("myElement");
        element.style.display = "none";
    }
    </script>
</body>
</html>

Conclusion

In this JavaScript Tutorial, we learned how to hide a HTML Element using JavaScript.