Skip to main content

How to Hide an Element by its ID in JavaScript

Hiding and showing elements is a fundamental part of creating a dynamic user interface. A common task is to hide a specific element, which is easily accomplished by selecting it with its unique ID. The best way to do this is by manipulating its CSS display or visibility properties.

This guide will teach you how to use document.getElementById() to select an element and hide it. You will also learn the critical difference between hiding an element with display: 'none' versus visibility: 'hidden' and see how to create a "toggle" function to show and hide an element.

The Core Method: Selecting by ID and Changing Style​

The process is a straightforward, two-step operation:

  1. Select: Use document.getElementById('your-id') to get a reference to the specific element you want to hide.
  2. Hide: Change a CSS property on the element's .style object to make it disappear.

Consider this HTML code for next examples:

<button id="hide-btn">Hide the Box</button>
<div id="my-box">This is the box.</div>

Method 1 (Recommended): Hiding with style.display = 'none'​

Setting an element's display property to none is the most common and effective way to hide it. This completely removes the element from the document's layout.

Solution:

const hideButton = document.getElementById('hide-btn');
const box = document.getElementById('my-box');

hideButton.addEventListener('click', () => {
  console.log('Hiding the box...');
  
  // Setting display to 'none' removes the element from the page layout.
  box.style.display = 'none';
});
note

When the button is clicked, the div will vanish, and the space it occupied will collapse, as if it were never in the HTML. This is the recommended method for most use cases.

Method 2: Hiding with style.visibility = 'hidden'​

An alternative is to set the visibility property to hidden. This makes the element invisible, but it still occupies its original space on the page.

Solution:

const hideButton = document.getElementById('hide-btn');
const box = document.getElementById('my-box');

hideButton.addEventListener('click', () => {
  // The box becomes invisible but still takes up space.
  box.style.visibility = 'hidden';
});
note

When this code runs, the div will disappear, but an empty space where it used to be will remain, and the layout of the page will not change.

display: 'none' vs. visibility: 'hidden'​

  • display: 'none': Removes the element from the document flow. Use this when you want to completely remove an element from view.
  • visibility: 'hidden': Hides the element but preserves its space. Use this when you want to make an element invisible without causing the page layout to shift.

How to Toggle an Element's Visibility​

A very common UI pattern is a button that shows an element if it's hidden and hides it if it's visible.

To create a toggle, you first need to read the element's current computed style to determine its state.

const toggleButton = document.getElementById('toggle-btn');
const box = document.getElementById('my-box');

toggleButton.addEventListener('click', () => {
  // 1. READ the current, computed style.
  const computedStyle = window.getComputedStyle(box);

  // 2. Check the current display value and toggle it.
  if (computedStyle.display === 'none') {
    // If it's hidden, show it.
    box.style.display = 'block'; // Or 'flex', 'inline', etc.
  } else {
    // If it's visible, hide it.
    box.style.display = 'none';
  }
});
note

This logic reliably toggles the element's display property.

Conclusion​

Hiding an element by its ID is a simple and powerful technique for creating dynamic user interfaces.

  • First, select the element with document.getElementById('your-id').
  • The recommended best practice for hiding is to set element.style.display = 'none'. This completely removes the element from the page layout.
  • Use element.style.visibility = 'hidden' only when you need to make an element invisible while preserving its space on the page.
  • To create a toggle, use window.getComputedStyle() to read the current state before changing it.

Table of Contents