How to hide a DOM element using plain JavaScript

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

Published Nov 20, 2018

Announcement 📣 next week, on Feb 26, I'll launch my JavaScript Fundamentals course. 10 modules, 91 lessons, 5 weeks of course. You can signup Feb 26, Feb 27 and Feb 28, then I'll close the registrations. Every day I will send you an email with questions and I read every reply you send me, and I will reply with suggestions. Sign up here and I'll shoot you an email when it's live! 🔥 ⤵️

Learning JavaScript? Download my free JavaScript Handbook 🔥

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'