Question

I am trying to select a link in a html row when I have the hover on it, I’m probably doing it wrong.

Here is my HTML:

<table id="table-id">
<tr>
    <td>yeah</td>
    <td>some content</td>
    <td><a href="#" class="remove">delete</a></td>
</tr>
...
</table>

And the jQuery code:

$('#table-id tr').hover(function(){
    $(this).children('.remove').show(); # I don't get the link in there
}, function(){
    $(this).children('.remove').hide(); # and thus not here neither
});

The links was hidden with:

$('a.remove').each(function(){
    $(this).hide();
    $(this).click(function(){
        return confirm("are you sure?");
    });
});

Any ideas about what I’m missing here?

Answer 1

The direct children of the tr are td elements, thus it doesn’t work.
You can use something like this:

  $('#table-id tr').hover(function(){
        $(this).children().find(".remove").show(); 
    }, function(){
        $(this).children().find(".remove").hide(); 
  });

http://jsfiddle.net/R7vY5/