Here are 3 methods to hide an element using JavaScript.
How to hide an element using JavaScript?
- Set native display style to
none - Set CSS style property to
none
This method allows you to use other properties, such asopacityorvisibility. - Remove the element from the DOM
This method is irreversible, as the element is completely gone. It needs to be added using another JavaScript action.
// Method #1
document.getElementById('element').style.display = 'none';
// Method #2
document.getElementById('element').style.setProperty('display', 'none', 'important');
// Method #3
document.getElementById('element').remove();Also, here’s a collection of helper functions to automate showing and hiding elements:
var show = (elem) => {
elem.style.display = 'block';
};
var hide = (elem) => {
elem.style.display = 'none';
};
var toggle = (elem) => {
// If the element is visible, hide it
if (window.getComputedStyle(elem).display === 'block') {
hide(elem);
return;
}
// Otherwise, show it
show(elem);
};
// Usage
show(document.getElementById('element'));
hide(document.querySelector('.element'));Read more about arrow functions.
Previous article
