Question

如果我想从以下内容中删除表格行：

<div id="tabel">
    <table class="tg">
        <thead>
            <tr><td colspan=3>How to remove table rows with jquery</td></tr>
            <tr>
                <th>Customer Name</th>
                <th>Country</th>
                <th>ID</th>
            </tr>
        </thead>

        <tbody id="tableBody">
            <tr id="tableData"></tr>
            <tr><td>Wolski  Zajazd</td><td>Warszawa</td><td>WOLZA</td></tr>
            <tr><td>Wilman Kala</td><td>Helsinki</td><td>WILMK</td></tr>
            <tr><td>White Clover Markets</td><td>Seattle</td><td>WHITC</td></tr>
            <tr><td>Wellington Importadora</td><td>Resende</td><td>WELLI</td></tr>  
            <tr><td>Wartian Herkku</td><td>Oulu</td><td>WARTH</td></tr>             
        </tbody>
    </table>
</div>

我有一个按钮，可以从数据库填充表单上的<tr>。我想使用jQuery删除tr并刷新数据。目前，当我按下刷新按钮时，tr将附加到。

这是我尝试过的jQuery和其他人：

    $('#tableData').children().remove('tr');
    $('#tableBody').remove(); --

任何帮助都会很棒。

Answer 1

您需要执行$('#tableBody').children('tr').remove();，因为您要删除#tableBody的子项，而不是#tableData（它本身就是一行）。

Answer 2

<tbody id="tableBody">
     <tr id="tableData"></tr>
        <tr><td>Wolski  Zajazd</td><td>Warszawa</td><td>WOLZA</td></tr>
        <tr><td>Wilman Kala</td><td>Helsinki</td><td>WILMK</td></tr>
        <tr><td>White Clover Markets</td><td>Seattle</td><td>WHITC</td></tr>
        <tr><td>Wellington Importadora</td><td>Resende</td><td>WELLI</td></tr>  
        <tr><td>Wartian Herkku</td><td>Oulu</td><td>WARTH</td></tr>             
 </tbody>

正如Arvind所解释的那样，你试图从tr中删除tr。

<tr id="tableData"></tr>

没有任何tr的子句，以便语句将删除，在这种情况下没有。

所以改为使用

$('#tableBody').children('tr').remove();

尽量不要使用find

$('#tableBody').find('tr').remove();

因为这将尝试遍历每个元素并将其删除，其中子项只捕获您指定的元素的直接子元素。 Documentation

Answer 3

您也可以使用：

$('#tableBody tr').remove();

使用jQuery删除表行

3 个答案: