Delete all rows in an HTML table

Question

this will remove all the rows:

$("#table_of_items tr").remove(); 

Keep the <th> row in a <thead> and the other rows in a <tbody> then replace the <tbody> with a new, empty one.

i.e.

var new_tbody = document.createElement('tbody');
populate_with_new_rows(new_tbody);
old_tbody.parentNode.replaceChild(new_tbody, old_tbody)

Very crude, but this also works:

var Table = document.getElementById("mytable");
Table.innerHTML = "";

Points to note, on the Watch out for common mistakes:

If your start index is 0 (or some index from begin), then, the correct code is:

var tableHeaderRowCount = 1;
var table = document.getElementById('WRITE_YOUR_HTML_TABLE_NAME_HERE');
var rowCount = table.rows.length;
for (var i = tableHeaderRowCount; i < rowCount; i++) {
    table.deleteRow(tableHeaderRowCount);
}

NOTES

1. the argument for deleteRow is fixed
this is required since as we delete a row, the number of rows decrease.
i.e; by the time i reaches (rows.length - 1), or even before that row is already deleted, so you will have some error/exception (or a silent one).

2. the rowCount is taken before the for loop starts since as we delete the "table.rows.length" will keep on changing, so again you have some issue, that only odd or even rows only gets deleted.

Hope that helps.