JavaScript Hide Element by ID

One of the key features of JavaScript is its ability to manipulate the Document Object Model (DOM) of a webpage. This means that we can use JavaScript to add, remove, or modify HTML elements on a webpage in real-time. So, In this article, we will discuss how to hide an element by its ID using JavaScript.

What is an ID?

The ID is an one of the attribute and we can assign IDname to all HTML elements using ‘ID’ attribute. It is used to give a unique identifier to an element on a webpage. It is similar to class attribute but in class attribute we can give multiple classnames ​​but in ID attribute we can’t give. And we should give unique name to ID.

For example, the following HTML code defines a <p> element with the ID “myPara”:

<p id="myPara">Hello World!</p>

Why should we hide element by ID ?

• You may want to hide a navigation bar until the user clicks on a menu icon, or hide a pop-up message after the user has read it. So, it’s improve the visual appearance or functionality of the page.
• You can improve the performance of the web page by hiding the elements of unnecessary amount of code
• It’s used to prevent unauthorized access or to protect user privacy. For ex, you may want to hide a password input field as the user types in their password, or hide certain personal details until the user has logged in.

Why hide the element by id instead of class?

• IDs are meant to be unique identifiers whereas classes can be shared by multiple elements on a web page. So, we can use ID to hide elements because it ensures that you are targeting the correct element and not accidentally hiding other elements.
• When we hide an element by its ID, the browser can quickly locate the element using the built-in getElementById() function. Whereas if we use class to hide an element, this can be slower than searching for elements by ID.
• IDs have higher specificity than classes, which means that styles applied to an ID will take precedence over styles applied to a class. So, ID is best way to hiding elements in JavaScript.

However, if you need to hide multiple elements with the same style, hiding them by class may be more appropriate.

2 Methods to hide element by ID

We can hide the HTML elements by ID in Javascript in two ways. So, follow these below two ways:

1. getElementById method

In this method, we use the JavaScript getElementById() in-build function to select the HTML element by using ID and use its ‘style.display‘ property to hide element.

For example

HTML:

<div id="section1"><h1>Footer</h1></div>

JS:

var element = document.getElementById("section1");
element.style.display = "none";

In this above example code:

1. In HTML code, we have created the <div> element and set the ID name to ‘section1’.
2. In JS code, We have created the variable ‘element‘ and assigned it “document.getElementById()” to select the <div> ID. We can select a div element in Javascript by passing the div idname as an argument to getElementById() function. So, in this above, we pass the ID name ‘section1‘ to ‘getElementById()’ function
3. Then hide the <div> element by set ‘style.display‘ property to “none“. The ‘style’ property is an object that contains all the style properties defined for the element in CSS, as well as any styles that have been added or modified using JavaScript. The display property controls whether an element is visible or hidden on a webpage. If we set ‘none’ to display property, it shows nothing.

2. setAttribute Method

As we selected HTML element in previous method, in this method also select HTML element by id using getElementById() function. Then Use setAttribute() to hide the element.

HTML:

<div id="section1"><h1>Footer</h1></div>

JS:

var element = document.getElementById("section1");
element.setAttribute("style", "display: none;");

1. In the above HTML code we have created a div element and set its idname to ‘section1’
2. Then we select the Div element in javascript using document.getElementById() by passing ‘section1’ idname as argument and store it in a variable called ‘element’.
3. To hide an element, we need to use the ‘setAttribute()’ method and pass it two arguments “style” and “display: none;“. The first argument indicates the attribute name and second attribute indicates the attributevalues. The display property controls whether an element is visible or hidden on a webpage. If we set ‘none’ to display property, it shows nothing.
4. This  code will store in HTML code by CSS inline style like:

   <div style="display: none;" id="section1"><h1>Footer</h1></div>

Conclusion

JavaScript is a powerful tool for manipulating the DOM of a webpage. So, We can easily hide HTML elements on a webpage by ID using the getElementById() method and the style property or setAttribute Method.