How to hide an element by id using JavaScript

To hide an element by id, you can use JavaScript in two commonly used methods: the display property or the visibility property, which are easily approached currently. I will introduce both ways to you and show the difference between the two steps below.

Hide an element by id using JavaScript 

Using the display property

The display property is used to specify how the element should be displayed. This property will display the elements as block elements, inline elements, not be displayed, etc. To hide an element, we have to set the style of the display property to ‘none‘. The entire element will be hidden and no longer take up space on the document layout.

Syntax:

element.style.display= "none"

By set style.display= “none” the element will not be displayed

Example:

Let’s try to hide the paragraph whose id is “myParagraph”.

<!DOCTYPE html>
<html>
<body>
    <p id="myParagraph">This paragraph will be hidden</p>
    <button onclick="hide()"> Hide paragraph above</button>
  
    <script>
        function hide(){
			// Select elements of the specific id
	        var element= document.getElementById("myParagraph");

	        // Hide selected element
	        element.style.display= "none";
         }        
    </script>
  
</body>
</html>

Output:

The paragraph above has been hidden, and the button below has been pushed up to replace it.

Using the visibility property

The visibility property determines whether a particular element is displayed on the web page. This way, we have to use the value ‘hidden‘ to hide the HTML element. The element will be invisible, and its position and size will be kept the same as the original.

Syntax:

element.style.visibility= "hidden"

By set style.visibility= “hidden” the element will be invisible

Example:

<!DOCTYPE html>
<html>
<body>
    <p id="myParagraph">This paragraph will be hidden</p>
    <button onclick="hide()"> Hide paragraph above</button>
  
    <script>
        function hide(){
			// Select elements of the specific id
	         var element= document.getElementById("myParagraph");

	        // Hide selected element
	        element.style.visibility= "hidden";
         }        
    </script>
  
</body>
</html>

Output:

By this course of action, the hidden paragraph becomes invisible, which means that its position will be preserved without being replaced by any element. This is the primary difference between using the visibility property and using the display property.

Summary

Via the examples and explanations above, I have briefly introduced two approaches to hiding an element by id using JavaScript. And I have also pointed out the fundamental difference between the two ways. In general, both methods are prevalent and accessible, and you can select the most suitable one depending on the results you want.

Leave a Reply

Your email address will not be published. Required fields are marked *