Element clicked on from group with same class

Question

I have the following menu

<ul>
   <li class="button">One</li>
   <li class="button">Two</li>
   <li class="button">Three</li>
   <li class="button">Four</li>
   <li class="button">Five</li>
</ul>

I need to hide only the button that I click on, currently my code is hiding all buttons.

$(".button").click(function() {
    $(".button").hide( "slow");
});

Answer 1

$(".button").click(function() {
    $(this).hide("slow");
});

The this jQuery selector will select the element that sent the function call, in this case the button that was clicked.

Answer 2

Inside the event handler this will refer to the clicked element, if you select this with jQuery you can call the hide function:

$(".button").click(function() {
    $(this).hide("slow");
});