Hiding a button in Javascript

Question

In my latest program, there is a button that displays some input popup boxes when clicked. After these boxes go away, how do I hide the button?

how are you making the boxes go away? If you are making them go away wih javascript, it is usually very simple to make something else dissapear. — diracdeltafunk
– diracdeltafunk, Commented Dec 30, 2011 at 23:44

Philippe · Accepted Answer · 2011-12-30 23:52:13Z

73

You can set its visibility property to hidden.

Here is a little demonstration, where one button is used to toggle the other one:

<input type="button" id="toggler" value="Toggler" onClick="action();" />
<input type="button" id="togglee" value="Togglee" />

<script>
    var hidden = false;
    function action() {
        hidden = !hidden;
        if(hidden) {
            document.getElementById('togglee').style.visibility = 'hidden';
        } else {
            document.getElementById('togglee').style.visibility = 'visible';
        }
    }
</script>

edited Dec 30, 2011 at 23:52

answered Dec 30, 2011 at 23:44

Philippe

9,8225 gold badges41 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Abhils Over a year ago

element.classList.add("hide-me"); can anyone explain this can hide the element ?

Ram Narasimhan · Accepted Answer · 2022-04-05 12:52:05Z

24

visibility="hidden"

is very useful, but it will still take up space on the page. You can also use

display="none"

because that will not only hide the object, but make it so that it doesn't take up space until it is displayed. (Also keep in mind that display's opposite is "block," not "visible")

edited Apr 5, 2022 at 12:52

Ram Narasimhan

22.6k5 gold badges54 silver badges56 bronze badges

answered Dec 30, 2011 at 23:52

benny.bennett

7081 gold badge10 silver badges25 bronze badges

Comments

Dominic Green · Accepted Answer · 2011-12-30 23:45:11Z

7

Something like this should remove it

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

If you are going to do alot of this dom manipulation might be worth looking at jquery

answered Dec 30, 2011 at 23:45

Dominic Green

10.3k4 gold badges32 silver badges36 bronze badges

1 Comment

Nguai al Over a year ago

This doesn't remove the dom but hides it.

Mo3z · Accepted Answer · 2011-12-30 23:45:16Z

4

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

answered Dec 30, 2011 at 23:45

Mo3z

2,1287 gold badges21 silver badges29 bronze badges

Comments

diracdeltafunk · Accepted Answer · 2011-12-30 23:49:46Z

2

//Your code to make the box goes here... call it box
box.id="foo";
//Your code to remove the box goes here
document.getElementById("foo").style.display="none";

of course if you are doing a lot of stuff like this, use jQuery

answered Dec 30, 2011 at 23:49

diracdeltafunk

1,2042 gold badges11 silver badges26 bronze badges

Comments

Sourabh Potnis · Accepted Answer · 2020-10-27 07:06:47Z

2

If the space on that page is not disabled then put your button inside a div.

<div id="a1">
<button>Click here</button>
</div>

Using Jquery:

<script language="javascript">
$("#a1").hide();
</script>

Using JS:

<script language="javascript">
document.getElementById("a1").style.visibility = "hidden";
document.getElementById("a1").style.display = "none";
</script>

answered Oct 27, 2020 at 7:06

Sourabh Potnis

3601 gold badge3 silver badges12 bronze badges

Comments

Anand Dwivedi · Accepted Answer · 2016-03-25 06:05:14Z

1

when you press the button so it should call function that will alert message. so after alert put style visible property . you can achieve it using

function OpenAlert(){
        alert("Getting the message");
        document.getElementById("getMessage").style.visibility="hidden";
        
    }

 <input type="button" id="getMessage" name="GetMessage" value="GetMessage" onclick="OpenAlert()"/>

Hope this will help . Happy to help

answered Mar 25, 2016 at 6:05

Anand Dwivedi

1,50814 silver badges24 bronze badges

Comments

KIAAT · Accepted Answer · 2022-02-08 14:00:03Z

1

function popAlert(){
        alert("Button will be hidden on click");
        document.getElementById("getMessage").style.visibility="hidden";
        
    }

   h1 {
            color: #0000ff;
        }

<h1>KIAAT</h1>
    <b>Hiding a button in Javascript after click</b>
    <br><br>
<input type="button" id="getMessage"  value="Hide Button OnClick" onclick="popAlert()"/>

answered Feb 8, 2022 at 14:00

KIAAT

113 bronze badges

Comments

Kęstutis · Accepted Answer · 2025-04-21 15:18:26Z

1

You can use this code:

btnID.hidden = true;

Documentation:
JavaScript
HTML

edited Apr 21 at 15:18

Kęstutis

1191 silver badge8 bronze badges

answered Dec 26, 2020 at 9:44

Programmer

3812 silver badges9 bronze badges

Comments

Wes Crow · Accepted Answer · 2011-12-30 23:47:12Z

0

If you are not using jQuery I would suggest using it. If you do, you would want to do something like:

$( 'button' ).on(
   'click'
   function (  )
   {
       $( this ).hide(  );
   }
);

answered Dec 30, 2011 at 23:47

Wes Crow

2,96722 silver badges24 bronze badges

Comments

Sanjun Dev · Accepted Answer · 2020-11-30 07:34:26Z

0

<script>
    $('#btn_hide').click( function () {
      $('#btn_hide').hide();
    });
</script>
<input type="button" id="btn_hide"/>

this will be enough

edited Nov 30, 2020 at 7:34

answered Jun 30, 2016 at 8:30

Sanjun Dev

5189 silver badges20 bronze badges

1 Comment

bobsbeenjamin Over a year ago

Line 3 is missing a close quote

Walter Balzarotti · Accepted Answer · 2022-01-16 09:15:01Z

0

var start = new Date().getTime();
while ((new Date().getTime() - start) < 1000){
  } //for 1 sec delay

answered Jan 16, 2022 at 9:15

Walter Balzarotti

271 silver badge5 bronze badges

1 Comment

Luca Kiebel Over a year ago

While this code snippet may solve the problem, it doesn't explain why or how it answers the question. Please include an explanation for your code, as that really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.

Collectives™ on Stack Overflow

Hiding a button in Javascript

12 Answers 12

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related