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';
});

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';
});

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';
  }
});

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.