JavaScript Clear Table Body - HTML

Introduction

In JavaScript, you often encounter situations where you want to clear the content of a table body in HTML dynamically. These situations can arise when you need to update the table with new data or remove all existing rows from the table. In this guide, you will learn how to clear the table body using JavaScript.

Clearing the Table Body

To clear the table body, you need to remove all the rows present within it. There are multiple ways to achieve this, but we will focus on the following two common methods.

Method 1: Setting the innerHTML Property

One way to clear the table body is by setting the innerHTML property of the table body element to an empty string. Here's an example:

document.getElementById("table-body").innerHTML = "";

In this code snippet, we retrieve the table body element using its ID (table-body), and then set its innerHTML property to an empty string. This effectively removes all the rows within the table body.

Method 2: Removing the Child Nodes

Another way to clear the table body is by removing all its child nodes. Here's an example:

var tableBody = document.getElementById("table-body");

while (tableBody.firstChild) {
    tableBody.removeChild(tableBody.firstChild);
}

In this code snippet, we retrieve the table body element using its ID (table-body), and then use a while loop to remove all its child nodes one by one until there are no more child nodes left.

Conclusion

Clearing the table body in HTML using JavaScript is a common task for dynamic web applications. By following the methods explained in this guide, you can easily remove all existing rows from the table body and update it with new data. Use the method that suits your requirements and coding style. Happy coding!