How to hide a DOM element using plain JavaScript

Find out how to hide and then show again elements in vanilla JavaScript

How do you hide a DOM element using plain JavaScript?

Every element exposes a style property which you can use to alter the CSS styling properties.

You can set the display property to ‘none’ (like you would do in CSS, display: none;):

element.style.display = 'none'

To display it again, set it back to block or inline:

element.style.display = 'block'

Written on Nov 20, 2018

→ Here's my latest YouTube video

→ Get my JavaScript Beginner's Handbook

→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter

→ JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025