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?

rankingsBody.removeChild(rankingsBody.firstChild) - You have to pass the node to remove to .removeChild() — StackSlave
– StackSlave, Commented Jan 29, 2020 at 22:47
console.log(rankingsBody.firstChild) <-- first child plays some mean tricks — epascarello
– epascarello, Commented Jan 29, 2020 at 22:51
you should take a look at my (late) answer i think it will serve you a lot more — Mister Jojo
– Mister Jojo, Commented Jan 29, 2020 at 23:03

Jesse · Accepted Answer · 2023-11-22 17:01:34Z

1

The line break after your <tbody> tag is a text node. firstChild gets the first node, not the first element. In your current code, replace firstChild with firstElementChild and it should work fine.

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

    rankingsBody.firstElementChild.remove();
}

edited Nov 22, 2023 at 17:01

answered Jan 29, 2020 at 22:49

Jesse

1,4414 gold badges13 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mister Jojo · Accepted Answer · 2020-01-29 23:20:28Z

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>

edited Jan 29, 2020 at 23:20

answered Jan 29, 2020 at 23:00

Mister Jojo

23k6 gold badges28 silver badges45 bronze badges

3 Comments

Rashedul Rough Over a year ago

:what is the underscore in this bt_del.onclick=_=> mean? whats the difference between using bt_del.onclick=_=> and bt_del.onclick=() =>

Mister Jojo Over a year ago

@RashedulRough see stackoverflow.com/questions/41085189/…

Rashedul Rough Over a year ago

Thanks a lot :-)

Josh · Accepted Answer · 2020-01-29 22:47:44Z

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>

Haibrayn González · Accepted Answer · 2020-01-29 22:51:52Z

0

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

answered Jan 29, 2020 at 22:51

Haibrayn González

18113 bronze badges

Comments

100PercentVirus · Accepted Answer · 2020-01-29 23:28:48Z

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

Collectives™ on Stack Overflow

Can't delete first table row with javascript

5 Answers 5

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related