DOM Recipes: Hiding and showing elements

Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.

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' (as you would in CSS, display: none;):

element.style.display = 'none'

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

element.style.display = 'block'

0:	Introduction
1:	▶︎ Hiding and showing elements
2:	Check if element is descendant
3:	Change colors/styles dynamically
4:	DOM timing and when elements are ready
5:	stopPropagation vs preventDefault
6:	How to detect adblockers
7:	Creating exit intent popups