How to hide an element using JavaScript

Follow me!

If you like this article, go ahead and follow me on Twitter:

Follow @getButterfly

Here are 3 methods to hide an element using JavaScript.

How to hide an element using JavaScript?

  1. Set native display style to none
  2. Set CSS style property to none
    This method allows you to use other properties, such as opacity or visibility.
  3. 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

Also, here’s a collection of helper functions to automate showing and hiding elements:

var show = (elem) => { = 'block';
var hide = (elem) => { = 'none';
var toggle = (elem) => {
    // If the element is visible, hide it
    if (window.getComputedStyle(elem).display === 'block') {

    // Otherwise, show it

// Usage

Read more about arrow functions.

Find more JavaScript tutorials, code snippets and samples here or more jQuery tutorials, code snippets and samples here.

👋 Added by Ciprian on Thursday, August 22, 2019 in JavaScript. Last modified on Wednesday, May 13, 2020.


Contribute to this article by sharing your opinion on Twitter:

Unlimited Automated Page Speed Monitoring & Tracking.
Use SpeedFactor to track your website. It’s simple and reliable.
See how real people experience the speed of your website. Then find (and fix) your web performance problems.
Get Started
Privacy Policy