Using JQuery, how do I repeatedly hide table rows if I want to click to hide one by one?

Question

This is the code I have. For now, it only hides the topmost row, and works one time (I don't understand why). I did it using delegate (borrowing from another StackOverflow answer) and for now it only hides if I click on the 3rd cell, by design, but honestly, I don't care that much if the solution hides by clicking on any cell.

JavaScript:

$( function() {
  $("#hideme").delegate("td:nth-child(3)", "click", function() {
    $(this).closest("tr").hide();
  });
} );

HAML:

  %tbody
    - @assigned.each do |index,ticket|
      %tr{:class => ticket["style"], :id=>"hideme"}
        %td= ticket["hour"] 
        %td= ticket["domain"]
        %td= ticket["status"]
        %td= ticket["timer"]
        %td= link_to_zenid ticket["id"]
        %td= link_to_admin ticket["asker"],ticket["domain"]
        %td= ticket["subject"]

Thanks; any help would be appreciated. I've tried to answer this by looking at other Stack Overflow answers but haven't found a working match yet.

Answer 1

You don't need to attach an event for every single table row as this will consume unnecessary memory. Yo could rely on event bubbling instead, and attach just one event to the entire table:

$('table').on('click', 'tr', function(event) { $(event.target).hide(); });

Answer 2

$("table tr").click(function(e){
$(this).hide();
e.StopPropogation(); //stop bublling of events, or can just return false
})