Using JQuery, how do I hide the button that is clicked?-CodePudding

I have thirty two buttons (for a game). After a button is clicked I would like to set the visibility to hidden after each one is clicked. In addition to setting the visibility to hidden I will be 'saving' the name of each button to a list. Any help would be greatly appreciated.

So far I have tried:

$(document).ready(function() {
    $('#b1, #b2, #b3, #b4, #b5, #b6, #b7, #b8, #b9,\
     #b10, #b11, #b12, #b13, #b14, #b15, #b16, #b17, #b18,\
      #b19, #b20, #b21, #b22, #b23, #b24, #b25, #b26, #b27,\
       #b28, #b29, #b30, #b31, #b32').on('click', function() {
        $(this).style.visibility='hidden';
    });
});

(Where I have each button a unique id)

and

$(document).ready(function() {
    $('type["button"]').on('click', function() {
        $(this).style.visibility='hidden';
    });
});

CodePudding user response：

$('input[name=Button_ID]').click(
     function ()
     {
         $(this).hide();
     }
);

CodePudding user response：

Welcome to javascript! jQuery has a function call called hide which if you call the selector element for a button will hide that specific item clicked on!

$(document).ready(function() {
    $("button").on('click', function() {
        $(this).hide();
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
</div>