DOM Recipes: Hiding and showing elements

Join the AI Workshop to learn more about AI and how it can be applied to web development. Next cohort February 1st, 2026

The AI-first Web Development BOOTCAMP cohort starts February 24th, 2026. 10 weeks of intensive training and hands-on projects.

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'

Lessons in this unit:

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