jquery remove table row

Question

I'm having a problem removing a table row, I can highlight the row red but when I try to remove it the slideup function messes up. I have wrapped them in a div but I don't no how to access the children of the tr and then the children of that?

$('#test tr:not(:first)').click(function()
        {           
            $(this).css("background-color","red");  

            $(this).children("td div").slideUp(function()
            {    
                $(this).parent().remove(); 
            });              
        });

The problem is this line:

$(this).children("td div").slideUp(function()

I also tried

$(this).children("td").children("div").slideUp(function()

The slide up only removes the first column.

<table border="1" width="600" cellspacing="0" cellpadding="0" id="test">
    <tr>
        <td><b>First Name</b></td>
        <td><b>Last Name</b></td>
        <td><b>Address</b></td>
        <td><b>Town</b></td>

    </tr>

    <tr>
        <td><div>First Name</td>
        <td>Last Name</td>
        <td>Address</td>
        <td>Town</div></td>

    </tr>

</table>

Do I need to wrap the content of each <td> with a div tag?

Thanks

Answer 1

Calling children("td div") will find all direct children that match the selector. (all children which are <div> s that happen to be inside of <td> s)
Since all of the direct children are <td> s, it won't match anything.

Calling children("td").children("div") will find all <div> s inside of all <td> s.
It will thus find the only <div> you have there.

EDIT : You can use jQuery to create wrapper elements; see my blog post :

$('#test tr:not(:first)').click(function() {           
    $(this).css("background-color","red");  

    $(this).children().wrapInner('<div>').children().slideUp(function() {    
        $(this).closest('tr').remove();
    });
});

Demo