Question

如果我点击按钮，我想实现一个功能，所以在我的tbody中清除第一个tr标签后面的所有tr标签。

这是我的HTML示例：

<table id="event_table">
    <thead>
        <tr>
            <th>date</th>
            <th>time</th>
            <th>action</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                blabla
            </td>
            <td>
                blabla
            </td>
            <td>
                blabla
            </td>
        </tr>

<!-- from here clear all tr tag -->
        <tr>
            <td>
                blubblub
            </td>
            <td>
                blubblub
            </td>
            <td>
                blubblub
            </td>
        </tr>
        <tr>
            <td>
                blubblub
            </td>
            <td>
                blubblub
            </td>
            <td>
                blubblub
            </td>
        </tr>

    </tbody>
</table>

<input type="submit" class="enter">

这是我的jQuery代码：

jQuery(".enter").click(function() {

    jQuery('#event_table > tbody > tr:first-child + tr').empty();

});

这里是我的jsFiddle示例：http://jsfiddle.net/D4cx9/2/

但我的例子不能正常工作。

我做错了什么？

希望有人可以帮助我。

Answer 1

您可以使用nth-child(n+2)选择器在第一个之后定位行：

$('#event_table > tbody > tr:nth-child(n+2)').remove();

我还认为你想要remove()而不是empty()，否则标记会被破坏（因为tr没有td标签）。

演示：http://jsfiddle.net/D4cx9/3/

Answer 2

您的选择器仅在第一个选择后选择下一个siblind tr。如果您想在第一个孩子使用~ General sibling selectors之后选择所有tr，同时empty只清空该元素，则不会将其删除，请使用remove代替< / p>

jQuery('#event_table > tbody > tr:first-child ~ tr').empty();

http://jsfiddle.net/D4cx9/4/

Answer 3

我发现:first-of-type更容易使用

jQuery(".enter").click(function() {
    jQuery('#event_table > tbody > tr:not(:first-of-type)').empty();        
});

Answer 4

还有：

$('#event_table > tbody > tr:gt(0)').remove();

清除tbody表jquery中第一个tr标记后的所有tr标记

4 个答案: