使用jQuery删除表行

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();

尽量不要使用查找

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

因为这将尝试遍历每个元素并将其删除，因此子级仅会抓住您指定的元素的直接子级。 文档

Answer 3

您还可以使用：

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