jQuery删除表行

Question

我在删除表格行时遇到问题，我可以用红色突出显示该行，但是当我尝试删除它时，slideup函数会弄乱。 我将它们包装在一个div中，但我不知道如何访问tr的子项，然后访问该子项？

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

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

问题是这一行：

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

我也试过

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

向上滑动只会移除第一列。

<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>

我是否需要用div标签包装每个<td>的内容？

谢谢

Answer 1

调用children("td div")将找到与选择器匹配的所有直接子代 。 （所有属于<div>的子元素都恰好位于<td>的内部）
由于所有直接子代均为<td> ，因此不会匹配任何内容。

调用children("td").children("div")会在所有<td>找到所有<div> 。
因此它将找到您唯一的<div> 。

编辑 ：您可以使用jQuery创建包装器元素； 看到我的博客文章 ：

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

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

演示版