Can't delete first table row with javascript

Question

I am trying to delete the first row of a table using javascript.

My table is:

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

and in javascript I am trying:

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

neither the remove() or removeChild() is working.

why? How do I make it work with rankingsBody variable?

Answer 1

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

Answer 2

You could use Element.children, which will only return actual 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>

Answer 3

You can try rankingsBody.firstElementChild.remove() as firstElementChild will give you the tr element.

Answer 4

Adding as answer instead of comment because I don't have enough rep.

This post might help: Add/delete row from a table

This may also be helpful: https://www.w3schools.com/jsref/met_table_deleterow.asp

Answer 5

This is another way of deleting the first row of your table. I hope it helps.

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

Usage example:

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