Reputation: 629

Hiding a button in Javascript

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?

Upvotes: 43

Answers (12)

benny.bennett

Reputation: 710

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")

Upvotes: 25

KIAAT

Reputation: 11

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()"/>

Upvotes: 1

Walter Balzarotti

Reputation: 27

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

Upvotes: 0

Programmer

Reputation: 371

You can use this code:

btnID.hidden = true;

Upvotes: 1

Sanjun Dev

Reputation: 518

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

this will be enough

Upvotes: 0

Sourabh Potnis

Reputation: 350

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>

Upvotes: 2

Anand Dwivedi

Reputation: 1500

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

Upvotes: 1

Philippe

Reputation: 9762

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>

Upvotes: 73

diracdeltafunk

Reputation: 1194

//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

Upvotes: 2

Wes Crow

Reputation: 2967

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(  );
   }
);

Upvotes: 0

Mo3z

Reputation: 2128

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

Upvotes: 4

Dominic Green

Reputation: 10258

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

Upvotes: 7

Hiding a button in Javascript

Answers (12)

Related Questions