Hide an html element by id using JavaScript

In this tutorial, we are going to learn about two different ways to hide an HTML element by id using JavaScript.

Consider, we have a following html div element.

<div id="container">Hello</div>

To hide an element, first we need to access it inside the JavaScript using the document.getElementById() then set its style.display property to none.

Here is an example:

const element = document.getElementById("container");

element.style.display= "none";

Using style.visibility property

Similarly, we can also hide an html element by setting the element’s style.visibility property to hidden.

const element = document.getElementById("container");

element.style.visibility= "hidden";

The main difference between style.display and style.visibility properties are:

• When we set a style.display property to none, it removes the element completely from the dom .

• When we set a style.display property to hidden, it just hides the element but doesn’t remove it in the dom.