Skip to main content

How to Hide a Button After Clicking It in JavaScript

A common UI pattern is to hide a button after it has been clicked. This is useful for "click-once" actions like submitting a form, confirming a deletion, or revealing content, as it prevents the user from clicking the button multiple times.

This guide will teach you the two primary CSS properties you can use to hide an element with JavaScript: display and visibility. You will learn the crucial difference between them and how to choose the right one for your specific use case.

The Core Task: Hiding an Element on Click​

The logic for this task is simple:

  1. Get a reference to the button element.
  2. Add a 'click' event listener to it.
  3. Inside the event listener's callback function, change a CSS property on the button to make it disappear.

Consider this HTML for next examples:

<button id="myButton">Click to Hide Me</button>

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

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

Solution:

const myButton = document.getElementById('myButton');

myButton.addEventListener('click', () => {
  console.log('Button clicked, hiding it now.');
  
  // Setting display to 'none' removes the element from the page
  myButton.style.display = 'none';
});
note

When this code runs, the button will vanish, and the space it occupied will collapse, as if the button never existed in the HTML. This is the recommended method for most use cases.

Method 2: 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 in the document layout.

const myButton = document.getElementById('myButton');

myButton.addEventListener('click', () => {
  console.log('Button clicked, making it invisible.');
  
  // The button becomes invisible but still takes up space
  myButton.style.visibility = 'hidden';
});
note

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

display: none vs. visibility: hidden: A Critical Comparison​

Choosing the right method depends on the user experience you want to create.

Propertydisplay: 'none'visibility: 'hidden'
Effect on LayoutRemoves the element from the document flow. The space it occupied collapses.Preserves the element's space. The element is invisible but still affects the layout.
EventsThe element cannot receive events (like clicks).The element cannot receive events.
Common Use CaseCompletely removing an element from view (e.g., hiding a closed modal, removing a submitted button).Making an element temporarily invisible without shifting the layout (e.g., in animations or UI state changes).
note

Best Practice: Use display: 'none' unless you have a specific reason to preserve the element's space in the layout.

Practical Example: A "Show Details" Button​

This script demonstrates a common UI pattern. A button is clicked, which hides the button itself and reveals a previously hidden content div.

HTML:

<button id="show-details-btn">Show Details</button>

<div id="details-content" style="display: none;">
  <p>This is the detailed content that was initially hidden.</p>
</div>

JavaScript:

const showButton = document.getElementById('show-details-btn');
const detailsContent = document.getElementById('details-content');

showButton.addEventListener('click', () => {
  // Hide the button
  showButton.style.display = 'none';
  
  // Show the content div
  detailsContent.style.display = 'block';
});

Conclusion​

Hiding a button after a click is a simple task that can be accomplished with a single line of JavaScript inside an event listener.

  • The recommended best practice is to set the button's style to display: 'none'. This completely removes the element from the page layout.
  • An alternative is to set visibility: 'hidden', which makes the element invisible but preserves its space in the layout.
  • The choice between the two depends on whether or not you want the page layout to shift after the element is hidden.

Table of Contents