JavaScript how to make an element invisible

This article covers how to make HTML elements invisible with Javascript, including an example.

Making an Element Invisible Using JavaScript

Making an element invisible using JavaScript is a fairly simple task. All that is required is a few lines of code that will set the visibility of the element to 'hidden'. Here is an example of how to make an element invisible using JavaScript:

// Get the element to make invisible
let element = document.getElementById("myElement");

// Set the visibility of the element to hidden
element.style.visibility = "hidden";

The code above will take the element with the id "myElement" and set its visibility to 'hidden'. This will make the element invisible to the user but still remain in the DOM. The element can be made visible again by setting the visibility back to 'visible'.

// Get the element to make visible
let element = document.getElementById("myElement");

// Set the visibility of the element to visible
element.style.visibility = "visible";

By setting the visibility of the element to 'visible', the element will be displayed to the user again. It is important to note that setting the visibility of an element to 'hidden' will not remove the element from the DOM, it will only make the element invisible to the user.