Hide a Button after clicking it using JavaScript

# Hide a Button after clicking it using JavaScript

To hide a button after clicking it:

Add a click event listener to the button.
Each time the button is clicked set its style.display property to none.
When the display property is set to none, the element is removed from the DOM.

Here is the HTML for the examples.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>
  </head>

  <body>
    <div
      id="box"
      style="
        height: 100px;
        width: 100px;
        background-color: salmon;
        display: none;
      "
    >
      Box
    </div>
    <button id="btn">Click me</button>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const btn = document.getElementById('btn');

btn.addEventListener('click', () => {
  // 👇️ hide button
  btn.style.display = 'none';

  // 👇️ show div
  const box = document.getElementById('box');
  box.style.display = 'block';
});

The code for this article is available on GitHub

We added a click event listener to the button, so a function is invoked every time it's clicked.

Each time the button is clicked, its display property is set to none to hide it.

The last line in the example sets the display property of a div to block to show it after hiding the button.

If you click on the button, you'll see the button disappear and the div get shown.

We set the button's display CSS property to none to hide it.

# Hide a Button after clicking it using `visibility`

However, you might need the visibility property depending on your use case.

When an element's display property is set to none, the element is removed from the DOM and does not affect the layout. The document is rendered as though the element doesn't exist.

On the other hand, when an element's visibility property is set to hidden, it still takes up space on the page, but the element is invisible (not drawn).

The element still affects the layout on the page as normal.

Here is an example that uses the visibility property to hide a button after clicking it and to show a div element.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div
      id="box"
      style="
        height: 100px;
        width: 100px;
        background-color: salmon;
        visibility: hidden;
      "
    >
      Box
    </div>
    <button id="btn">Click me</button>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const btn = document.getElementById('btn');

btn.addEventListener('click', () => {
  // 👇️ hide button (still takes up space on the page)
  btn.style.visibility = 'hidden';

  // 👇️ show div
  const box = document.getElementById('box');
  box.style.visibility = 'visible';
});

The code for this article is available on GitHub

If you refresh the page, you'll see that the button still takes up space, but is invisible.

This is the difference between setting visibility to hidden and display to none.

This behavior might be better if you're looking to avoid shifting the layout of the page which might be confusing to users.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Hide a Button after clicking it using JavaScript