javascript - 无法使用 JavaScript 删除第一个表格行

Question

我正在尝试使用 JavaScript 删除表格的第一行。

我的 table 是:

 <table id="rankings-table" class="table">
    <thead>
        <tr>
        <th>Ranking</th>
        <th>Full name</th>
        <th>points</th>
        </tr>
    </thead>

    <tbody>
        <tr>
        <td>1</td>
        <td>dom</td>
        <td>1,340</td>
        </tr>
        <tr>
        <td>2</td>
        <td>Naoimi</td>
        <td>932</td>
        </tr>
        <tr>
        <td>3</td>
        <td>Sarah</td>
        <td>1,120</td>
        </tr>
    </tbody>
    </table>

在 javascript 中我正在尝试:

<script type="text/javascript">

    const rankingsBody = document.querySelector('#rankings-table > tbody ');

     function deleteRankings() {
        console.log(rankingsBody);

        rankingsBody.firstChild.remove();
        //rankingsBody.removeChild(rankingsBody.firstChild);
        }


    document.addEventListener("DOMContentLoaded", () => { deleteRankings(); });

</script>

remove() 或 removeChild() 均不起作用。

为什么？如何使其与 rankingsBody 变量一起使用？

Answer 1

发生这种情况的原因是因为 <tbody> 之后的新行标签是一个文本节点。 firstChild获取第一个节点，而不是第一个元素。在当前代码中，替换 firstChild与 firstElementChild它应该可以正常工作。

function deleteRankings() {
    console.log(rankingsBody);

    rankingsBody.firstElementChild.remove();
}