CODEWITHSUNDEEP
javascript
Rashedul Rough
Rashedul Rough

Reputation: 99

Can't delete first table row with javascript

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?

Upvotes: 0

Views: 1539

Answers (5)

Jesse
Jesse

Reputation: 1425

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

Upvotes: 1

100PercentVirus
100PercentVirus

Reputation: 17

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

enter image description here

Upvotes: 0

Mister Jojo
Mister Jojo

Reputation: 22265

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>

Upvotes: 1

Haibrayn Gonz&#225;lez
Haibrayn Gonz&#225;lez

Reputation: 181

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

Upvotes: 0

Josh
Josh

Reputation: 1474

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>

Upvotes: 0

Related Questions