How to hide an element using JavaScript

Ciprian on Thursday, August 22, 2019 in JavaScript DOM
Last modified on Tuesday, December 5, 2023

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 as opacity or visibility.
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'));