web-dev-qa-db-fra.com

Cacher un bouton en Javascript

Dans mon dernier programme, il existe un bouton qui affiche des zones de saisie contextuelles lorsque vous cliquez dessus. Après que ces boîtes soient parties, comment masquer le bouton?

javascripthtml5buttonhide
16
dualCore

Vous pouvez définir sa propriété visibility sur hidden.

Voici une petite démonstration, où un bouton est utilisé pour basculer l’autre:

<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>
36
Philippe
visibility=hidden

est très utile, mais cela prendra toujours de la place sur la page. Vous pouvez aussi utiliser

display=none

car cela non seulement masquera l'objet, mais le fera pour qu'il ne prenne pas de place tant qu'il n'est pas affiché. (Gardez également à l'esprit que le contraire de l'affichage est "bloquer" et non "visible")

14
BennyMathison

Quelque chose comme ça devrait l'enlever 

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

Si vous allez faire beaucoup de cette manipulation de dom peut être intéressant de regarder jQuery

5
Dominic Green
document.getElementById('btnID').style.visibility='hidden';
2
Mo3z
//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";

bien sûr, si vous faites beaucoup de choses comme ça, utilisez jQuery

2
diracdeltafunk

Si vous n'utilisez pas jQuery, je vous conseillerais de l'utiliser. Si vous le faites, vous voudriez faire quelque chose comme:

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

cela suffira

0
sanjun dev