javascript - Delete all rows in an HTML table - Stack Overflow

admin管理员组

文章数量:1129455

How can I delete all rows of an HTML table except the <th>'s using Javascript, and without looping through all the rows in the table? I have a very huge table and I don't want to freeze the UI while I'm looping through the rows to delete them

How can I delete all rows of an HTML table except the <th>'s using Javascript, and without looping through all the rows in the table? I have a very huge table and I don't want to freeze the UI while I'm looping through the rows to delete them

• javascript
• html
• html-table

Share Improve this question Follow edited Nov 8, 2013 at 17:27 JJJ 33.2k2020 gold badges9494 silver badges103103 bronze badges asked Sep 1, 2011 at 14:05 K''K'' 5,22877 gold badges3434 silver badges4343 bronze badges 2

• 2 There has to be a loop, there is no "delete-multiple-elements" command, the method removeChild takes only a single DOM element. – Šime Vidas Commented Sep 1, 2011 at 14:07
• @SLaks assuming he meant the row containing the header rows – Eonasdan Commented Sep 1, 2011 at 14:12

Add a comment  | 

27 Answers 27

Sorted by: Reset to default 134

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.

This is an old question, however I recently had a similar issue.
I wrote this code to solve it:

var elmtTable = document.getElementById('TABLE_ID_HERE');
var tableRows = elmtTable.getElementsByTagName('tr');
var rowCount = tableRows.length;

for (var x=rowCount-1; x>0; x--) {
   elmtTable.removeChild(tableRows[x]);
}

That will remove all rows, except the first.

Cheers!

If you can declare an ID for tbody you can simply run this function:

var node = document.getElementById("tablebody");
while (node.hasChildNodes()) {
  node.removeChild(node.lastChild);
}

Assuming you have just one table so you can reference it with just the type. If you don't want to delete the headers:

$("tbody").children().remove()

otherwise:

$("table").children().remove()

hope it helps!

I needed to delete all rows except the first and solution posted by @strat but that resulted in uncaught exception (referencing Node in context where it does not exist). The following worked for me.

var myTable = document.getElementById("myTable");
var rowCount = myTable.rows.length;
for (var x=rowCount-1; x>0; x--) {
   myTable.deleteRow(x);
}

the give below code works great. It removes all rows except header row. So this code really t

$("#Your_Table tr>td").remove();

How about this:

When the page first loads, do this:

var myTable = document.getElementById("myTable");
myTable.oldHTML=myTable.innerHTML;

Then when you want to clear the table:

myTable.innerHTML=myTable.oldHTML;

The result will be your header row(s) if that's all you started with, the performance is dramatically faster than looping.

this would work iteration deletetion in HTML table in native

document.querySelectorAll("table tbody tr").forEach(function(e){e.remove()})

Assing some id to tbody tag. i.e. . After this, the following line should retain the table header/footer and remove all the rows.

document.getElementById("yourID").innerHTML="";

And, if you want the entire table (header/rows/footer) to wipe out, then set the id at table level i.e.

Pure javascript, no loops and preserving headers:

function restartTable(){

const tbody = document.getElementById("tblDetail").getElementsByTagName('tbody')[0];
    tbody.innerHTML = "";

}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

 <table id="tblDetail" class="table table-bordered table-hover table-ligth table-sm table-striped">
            <thead>
                <tr>
                    <th>Header 1</th>
                    <th>Header 2</th>
                    <th>Header 2</th>
                    <th>Header 2</th>
                </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  a
                </td>
                <td>
                  b
                </td>
                <td>
                  c
                </td>
                <td>
                  d
                </td>
              </tr>
              <tr>
                <td>
                  1
                </td>
                <td>
                  2
                </td>
                <td>
                  3
                </td>
                <td>
                  4
                </td>
                <tr>
                <td>
                  e
                </td>
                <td>
                  f
                </td>
                <td>
                  g
                </td>
                <td>
                  h
                </td>
               
              </tr>
              </tr>
            </tbody>
        </table>
        
                
        <button type="button" onclick="restartTable()">restart table</button>

This works in IE without even having to declare a var for the table and will delete all rows:

for(var i = 0; i < resultsTable.rows.length;)
{   
   resultsTable.deleteRow(i);
}

this is a simple code I just wrote to solve this, without removing the header row (first one).

var Tbl = document.getElementById('tblId');
while(Tbl.childNodes.length>2){Tbl.removeChild(Tbl.lastChild);}

Hope it works for you!!.

If you do not want to remove th and just want to remove the rows inside, this is working perfectly.

var tb = document.getElementById('tableId');
  while(tb.rows.length > 1) {
  tb.deleteRow(1);
}

If you have far fewer <th> rows than non-<th> rows, you could collect all the <th> rows into a string, remove the entire table, and then write <table>thstring</table> where the table used to be.

EDIT: Where, obviously, "thstring" is the html for all of the rows of <th>s.

Assign an id or a class for your tbody.

document.querySelector("#tbodyId").remove();
document.querySelectorAll(".tbodyClass").remove();

You can name your id or class how you want, not necessarily #tbodyId or .tbodyClass.

This will remove all of the rows except the <th>:

document.querySelectorAll("td").forEach(function (data) {
  data.parentNode.remove();
});

@lkan's answer worked for me, however to leave the first row, change

from

for (var x=rowCount-1; x>0; x--)

to

for (var x=rowCount-1; x>1; x--)

Full code:

var myTable = document.getElementById("myTable");
var rowCount = myTable.rows.length;
for (var x=rowCount-1; x>1; x--) {
   myTable.deleteRow(x);
}

Same thing I faced. So I come up with the solution by which you don't have to Unset the heading of table only remove the data..

<script>
  var tablebody =document.getElementById('myTableBody');
  tablebody.innerHTML = "";

</script>

<table>
  <thead>
  </thead>
  <tbody id='myTableBody'>
  </tbody>
</table>

Try this out will work properly...

Call replaceChildren() on the relevant element without providing options. For example:

const tableBody = document.getElementById('tableBody');
tableBody.replaceChildren();

https://developer.mozilla.org/en-US/docs/Web/API/Element/replaceChildren

Assuming the <table> element is accessible (e.g. by id), you can select the table body child node and then remove each child until no more remain. If you have structured your HTML table properly, namely with table headers in the <thead> element, this will only remove the table rows.

We use lastElementChild to preserve all non-element (namely #text nodes and ) children of the parent (but not their descendants). See this SO answer for a more general example, as well as an analysis of various methods to remove all of an element's children.

const tableEl = document.getElementById('my-table');

const tableBodyEl = tableEl.querySelector('tbody');

// or, directly get the <tbody> element if its id is known
// const tableBodyEl = document.getElementById('table-rows');

while (tableBodyEl.lastElementChild) {
  tableBodyEl.removeChild(tableBodyEl.lastElementChild);
}

<table id="my-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Color</th>
    </tr>
  </thead>
  <tbody id="table-rows">
    <tr>
      <td>Apple</td>
      <td>Red</td>
    </tr>
    <!-- comment child preserved -->
    text child preserved
    <tr>
      <td>Banana</td>
      <td>Yellow</td>
    </tr>
    <tr>
      <td>Plum</td>
      <td>Purple</td>
    </tr>
  </tbody>
</table>

var table = document.getElementById("myTable");
var rows = table.querySelectorAll("tr:not(:first-child)");
var i = rows.length - 1;

while (i >= 0) {
  table.deleteRow(i);
  i--;
}

function deleteRows() {
  const table = document.getElementById("myTable");
  const tbody = table.getElementsByTagName("tbody")[0];
  const rows = tbody.getElementsByTagName("tr");

for (let i = rows.length - 1; i >= 0; i--) {
    const row = rows[i];
    if (!row.firstChild.tagName?.includes("TH")) {
      row.parentNode.removeChild(row);
    }
  }
}

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Kareem</td>
      <td>25</td>
      <td>Male</td>
    </tr>
    <tr>
      <td>Azza</td>
      <td>30</td>
      <td>Female</td>
    </tr>
    <tr>
      <td>Mohammed</td>
      <td>40</td>
      <td>Male</td>
    </tr>
  </tbody>
</table>

<button onclick="deleteRows()">Delete Rows</button>

Circa 2023, most browsers supported the 'unmentioned' tBodies collection. So if your TH are in rows in thead, and the rows to remove are in one or more tbodies, you can invoke, with a little iteration, table.removeChild(tbody). Needs to be tested on large tbodies.

if (table.tBodies.length > 1) console.info ('Removing more than 1 tbody element');
while (table.tBodies.length > 0) {                  // remove all tbody elements
    table.removeChild (table.tBodies[0]);
}

Just Clear the table body.

$("#tblbody").html("");

const table = document.querySelector('table');
table.innerHTML === ' ' ? null : table.innerHTML = ' ';

The above code worked fine for me. It checks to see if the table contains any data and then clears everything including the header.

本文标签： javascriptDelete all rows in an HTML tableStack Overflow