How do I clear the rows in dynamically generated table?

Question

I have a table that gets generated dynamically by fetching content from arrays stored in the localStorage.

Unfortunately, I noticed that every time the script is run, it appends to the existing table in the DOM as illustrated in the following images below:

The first time the script runs, the below is what is yielded:

The second time the same script is run, below is what is yielded:

Find below the script that generates the table above:

var array = JSON.parse(localStorage.getItem('transactionData'));
var table = document.getElementById("table");

for (var i = 0; i < array.length; i++) {
    var newRow = table.insertRow(table.length);             
    currentTransaction = array[i];

    for (var b = 0; b < keys.length; b++) {
        var cell = newRow.insertCell(b);
        cell.innerText = currentTransaction[keys[b]];

        if (keys[b] == "statusIcon") {
           console.log("keys[b] value is: " +currentTransaction[keys[b]] );
           cell.innerHTML = currentTransaction[keys[b]];
            } 
       else {
           cell.innerText = currentTransaction[keys[b]];
            }
     }
}   

This is my HTML code for the table:

<table class="table table-striped" id="table">
  <thead>
    <tr>
      <th>Status</th>
      <th>Amount</th>
      <th>Time</th>
    </tr>
  </thead>
  <tbody>
    <tr>
    </tr>
  </tbody>
</table> 

To resolve this issue, I am trying to write a script that clears the existing rendered table in DOM BEFORE running the table generating script.

Find below my script to clear the rows:

var array = JSON.parse(localStorage.getItem('transactionData'));
var table = document.getElementById("table");
var rowCount = array.length;;

for (var i = rowCount; i > 0; i--) {
    table.deleteRow(i);

}

Before the script is run, the table looks like this:

After this script is run I see this:

...and I also get the error message below:

Uncaught DOMException: Failed to execute 'deleteRow' on 'HTMLTableElement':
The index provided (5) is greater than the number of 
rows in the table (5).

Can someone kindly point out what's wrong with my script and how do I resolve this issue?

Answer 1

To empty the body <tbody> of the table, excluding the table <thead>. I gave the table body <tbody> a id="tableBodyContent".

View the updated HTML code below:

<table class="table table-striped" id="table">
  <thead>
    <tr>
      <th>Status</th>
      <th>Amount</th>
      <th>Time</th>
    </tr>
  </thead>
  <tbody id="tableBodyContent">
    <tr>
    </tr>
  </tbody>
</table>

At the beginning of the dynamic table script, I run a script that reads in the value of the table body: <tbody id="tableBodyContent">, nullifies it, and resets it with the default values.

View the updated script below:

var bodyContent = document.getElementById("tableBodyContent");
console.log("Check this out: " +bodyContent.innerHTML);
bodyContent.innerHTML = "";
bodyContent.innerHTML = "<tr> </tr>";


var array = JSON.parse(localStorage.getItem('transactionData'));
var table = document.getElementById("table");

for (var i = 0; i < array.length; i++) {
var newRow = table.insertRow(table.length);             
currentTransaction = array[i];

for (var b = 0; b < keys.length; b++) {
    var cell = newRow.insertCell(b);
    cell.innerText = currentTransaction[keys[b]];

    if (keys[b] == "statusIcon") {
       console.log("keys[b] value is: " +currentTransaction[keys[b]] );
       cell.innerHTML = currentTransaction[keys[b]];
        } 
   else {
       cell.innerText = currentTransaction[keys[b]];
        }
 }
}  

The script above console.logs:

Check this out: <tr> </tr><tr><td><i class="fas fa-check-circle colorBlue">
</i></td><td>10</td><td>10:37am, Sun</td></tr><tr><td><i class="fas fa-
exclamation-triangle colorRed"></i></td><td>50000</td><td>10:36am, Sun</td>
</tr><tr><td><i class="fas fa-exclamation-triangle colorYellow"></i></td>
<td>50000</td><td>10:35am, Sun</td></tr><tr><td><i class="fas fa-exclamation-
triangle colorYellow"></i></td><td>60000</td><td>10:33am, Sun</td></tr><tr>
<td><i class="fas fa-exclamation-triangle colorRed"></i></td><td>50</td>
<td>10:25am, Sun</td></tr><tr><td><i class="fas fa-exclamation-triangle 
colorRed"></i></td><td>6332</td><td>10:24am, Sun</td></tr>