无法使用 javascript 删除第一个表格行答案

【问题标题】：Can't delete first table row with javascript无法使用 javascript 删除第一个表格行
【发布时间】：2022-02-10 00:39:17
【问题描述】：

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

我的桌子是：

 <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 变量一起使用？

【问题讨论】：

rankingsBody.removeChild(rankingsBody.firstChild) - 您必须将要删除的节点传递给.removeChild()
console.log(rankingsBody.firstChild)
@epascarello 哈哈！
你应该看看我的（迟到的）答案，我认为它会为你提供更多帮助

标签： javascript

【解决方案1】：

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

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

    rankingsBody.firstElementChild.remove();
}

【讨论】：

【解决方案2】：

只需使用 deleteRow => https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement/deleteRow

const rankingsBody = document.querySelector('#rankings-table tbody')
  ;
bt_del.onclick=_=>
  {
  if (rankingsBody.rows.length) 
    { rankingsBody.deleteRow(0)  }
  else
    { alert('no more row to delete') }
  }

table { border-collapse: collapse; }
th, td { border: 1px solid gray;  padding: .3em 1em; }

<br> 
<button id="bt_del">delete first row </button>
  
<br> <br>  
  
<table id="rankings-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>

【讨论】：

:bt_del.onclick=_=> 中的下划线是什么意思？使用bt_del.onclick=_=> 和bt_del.onclick=() => 有什么区别
@RashedulRough 见stackoverflow.com/questions/41085189/…
非常感谢 :-)

【解决方案3】：

您可以使用Element.children，它只会返回实际的Nodes。

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

document.addEventListener("DOMContentLoaded", deleteRankings);

function deleteRankings() {
    rankingsBody.removeChild(rankingsBody.children[0]);
}

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

【讨论】：

【解决方案4】：

您可以尝试rankingsBody.firstElementChild.remove()，因为firstElementChild 将为您提供tr 元素。

【讨论】：

【解决方案5】：

添加为答案而不是评论，因为我没有足够的代表。

这篇文章可能会有所帮助：Add/delete row from a table

这也可能有帮助：https://www.w3schools.com/jsref/met_table_deleterow.asp

【讨论】：

【解决方案6】：

这是删除表格第一行的另一种方法。希望对你有帮助。

function deleteFirstRowOfTable(tableId)
{   //get the text in the first <tbody> tag of the table
    var tableBody = document.getElementById(tableId).tBodies[0].innerHTML;
    var index = tableBody.indexOf("</tr>");//find the first occurence of the end tag
    if(index !== -1)//if </tr> end tag is found
    {
        tableBody = tableBody.slice(index).replace('</tr>','');//remove the first row from the table body
        //set the new table body
        document.getElementById(tableId).tBodies[0].innerHTML = tableBody;
    }
}

用法示例：

deleteFirstRowOfTable('rankings-table'); 
//the output is as shown below

【讨论】：