Hide a Button after clicking it using JavaScript

avatar

Borislav Hadzhiev

Wed Dec 29 20212 min read

banner

Photo by Tomáš Gal

Hide a Button after clicking it using JavaScript #

To hide a button after clicking it:

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

Here is the HTML for the example in this article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </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>

And here is the related JavaScript code.

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

We added an event listener, so a function is invoked each time the user clicks on the button.

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

The last line of the example sets the display property to block to show adiv element after hiding the button.

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

To hide the button, we set its display CSS property to none, 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 has no effect on the layout. The document is rendered as though the element does not exist.

On the other hand, when an element's visibility property is set to hidden, it still takes up space on the page, however the element is invisible (not drawn). It still affects the layout on your page as normal.

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

index.html
<!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>

And here is the related JavaScript code.

index.js
const btn = document.getElementById('btn'); btn.addEventListener('click', () => { // 👇️ hide button (still takes up space on page) btn.style.visibility = 'hidden'; // 👇️ show div const box = document.getElementById('box'); box.style.visibility = 'visible'; });

If you refresh the page, you'll see that the div element 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 the layout of the page shifting too much and confusing the user.

Use the search field on my Home Page to filter through my more than 1,000 articles.