JavaScript Hide Element By Id
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Riya
In this tutorial we will show you the solution of JavaScript hide element by ID, as there are many methods with the help of which we can hide elements by id in JavaScript.
Here, below we are going to show you codes in which we show you how to hide elements with help of id.
Step By Step Guide On JavaScript Hide Element By Id :-
Mainly, there are two ways with the help of which you can hide elements. We come in touch with these methods in our codes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>home page</title>
</head>
<body>
<h1 id="one">
heading one
</h1>
<h1 id="two">
heading two
</h1>
<h1 id="three">
heading three
</h1>
<h1 id="four">
heading four
</h1>
<h1 id="five">
heading five
</h1>
<h1 id="six">
heading six
</h1>
<script>
var hidden = document.getElementById('five');
hidden.style.display = 'none';
var invisible = document.getElementById('two');
invisible.style.visibility='hidden';
</script>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Here, then we create a body tag. All the content which we want to show on browser’s screen or display is always written inside this codes.
- Here, you can see that here we create some headings. All the under heading one but text written in them is different. And id’s given to them are also different. Here, we create six headings as you see.
- Now, our task is to hide second and fifth division with the help of id in JavaScript.
- Now, let us discuss about JavaScript that we use in script tag.
- Inside script tag, we show two ways to hide elements. In both of them first we get there values inside variable. You can see the code that how we get them.
- Now, in our first method we use display none property and in other we use visibility hidden. Display none properly hides the element whereas visibility hidden does the same task but it left space after hide element. So, it upto you that which element you would use.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
At last in conclusion, here we can say that with the help of this article we are able to understand how we can hide elements with the help of id in JavaScript.
I hope this tutorial on JavaScript hide element by ID helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
