How do you hide a button on clicking it?

Question

jQuery has a lot of handy methods to get the work done easily. In this article, we will discuss one of them which is the hide() method. We can use this method for various purposes on our webpage and get an efficient result.

Table of Contents Show

Toggle (Hide/Show) an Element
Method 2: Hide Button in JavaScript Using “style.display” Property
How do I hide the button on a button click?
How do I make a button hidden?
How do I hide the button after clicking in react?
How do I make a button disappear after clicking CSS?

The very first step will be creating an HTML file and link the jQuery library file via CDN.

jQuery CDN Link:

<script src=”https://code.jquery.com/jquery-3.6.0.min.js” integrity=”sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=” crossorigin=”anonymous”></script>

jQuery hide() method: This method is used for hiding the web elements.

Example 1: Create an HTML file and add the following code to it.

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<1<2

<1<<5

<6<7=<9

<6html1=html3

<6html5=html7>

<1lang0<5>

lang0head>

lang7

<=0>

<1<=4 =5==7 html56=html58html59=4html61

Toggle between hiding and showing an element with JavaScript.

Toggle Hide and Show

Toggle (Hide/Show) an Element

Step 1) Add HTML:

Example

Click Me

This is my DIV element.

Step 2) Add JavaScript:

Example

function myFunction() {
  var x = document.getElementById("myDIV");
if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
}
}

Try it Yourself »

Earn income with your HTML skills

Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest self-service freelancing marketplace for people like you.

To hide a button by clicking on it, first we need to access the button element inside the JavaScript using the document.getElementById() method, add a click eventListener to it then on each click set its style.display property to “none”`.

Here is an example:

const button = document.getElementbyId("btn");

button.addEventListener("click", ()=>{
   button.style.display= "none";
})

When we set a style.display property to hidden, it just hides the element but doesn’t remove it in the dom.

The “style.visibility” property sets the visibility of an element. This property can be utilized to hide the visibility of the predefined button by referring to its “id”.

Syntax

Object.style.visibility = 'hidden'

Here, the visibility of the specified “Object” is set as “hidden”.

Check out the following demonstration for a better understanding.

Example

First, create a button using the input tag, assign it a value named “Click_Me”, and include an onclick which will trigger the “hideButton()” function when the added button is clicked:

In the JavaScript file, define the hideButton() function in such a way that it invokes the “document.getElementsById()” to access the created button and set its visibility as “hidden”:

function hideButton(){

document.getElementById('btn').style.visibility= 'hidden';

}

The output of the above program is shown as follows:

Method 2: Hide Button in JavaScript Using “style.display” Property

The “style.display” property sets the specified element’s display type. This technique can be implemented to hide the created button by fetching its specified id and setting “none” as its display type.

Syntax

Object.style.display='none'

Here, the display property of the “Object” is set as “none”.

Go through the following example for demonstration.

Example

We will utilize the same HTML code in this example. However, in the JavaScript file, we will define the “hideButton()” function which will be invoked when the button is clicked. In its definition, the “document.getElementById()” method will fetch the button using its “btn” id and the value of its “style.display” property will be set as “none” in order to hide it:

function hideButton(){

document.getElementById('btn').style.display= 'none';

}

Output

We have offered the simplest methods to hide buttons in JavaScript.

Conclusion

To hide a button in JavaScript, you can utilize the “style.visibility” and “style.display” properties. To do so, firstly, you have to fetch the button by specifying its id in the document.getElementbyId() method and then set the value of the style.visibility property as hidden, or none for the style.display property. This manual discussed the method related to hiding buttons in JavaScript.

How do I hide the button on a button click?

visibility” property sets the visibility of an element. This property can be utilized to hide the visibility of the predefined button by referring to its “id”. Here, the visibility of the specified “Object” is set as “hidden”.

How do I make a button hidden?

The hidden attribute hides the <button> element. You can specify either 'hidden' (without value) or 'hidden="hidden"'. Both are valid. A hidden <button> is not visible, but maintains its position on the page.

How do I hide the button after clicking in react?

React disable button after click For example, you may want to disable a <button> after it has been clicked. You can do so by adding a state that controls the value of disabled prop. Let's name the state disable and set its default value to false : const [disable, setDisable] = React.

How do I make a button disappear after clicking CSS?

The inline CSS declaration display:block; must be there. When the button is clicked, the onclick="this. style. display='none' attribute makes the submit button disappear.