rendering an html table by javascript

Question

I got stuck at a weird point ...

// ticketList refers to an html table id
console.log("ticketList.rows.length before: " + ticketList.rows.length);
    for (i= 1; i < ticketList.rows.length; i++) {
        ticketList.rows[i].remove();
        console.log(`ticket ${i - 1} removed`);
    }

    // some more code which works properly

    console.log("ticketList.rows.length after: " + ticketList.rows.length);

Now this is the console output:

ticketList.rows.length before: 13
ticket 0 removed
ticket 1 removed
ticket 2 removed
ticket 3 removed
ticket 4 removed
ticket 5 removed
ticketList.rows.length after: 19

The initial value of 13 is correct. Why does it stop after 6 iterations instead of removing twelve elements as supposed?

I tried hardcoding the stop value in the for-loop and got the following error:

Cannot read properties of undefined (reading 'remove')

Answer 1

If you delete a row, your indexes will be off. Easiest solution is to iterate backwards.

for (let i = ticketList.rows.length - 1; i >= 0; i--) {
    ticketList.rows[i].remove();
    console.log(`ticket ${i - 1} removed`);
}

Also note that this is deleting all rows, if you wanted to keep the first one, just use i > 0;

See Splice not working the way I expect