Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Table deleteTFoot() Method
The HTML DOM table deleteTFoot() method removes the <tfoot> element from a table in an HTML document. This method provides a quick way to dynamically remove table footers without manually selecting and deleting the footer element.
Syntax
Following is the syntax for the deleteTFoot() method −
table.deleteTFoot()
Parameters
This method does not accept any parameters.
Return Value
This method returns undefined. If no <tfoot> element exists in the table, the method does nothing and no error is thrown.
Example − Basic Usage
Following example demonstrates how to use the deleteTFoot() method to remove a table footer −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM deleteTFoot() Method</title>
<style>
table {
margin: 20px auto;
border-collapse: collapse;
}
th, td {
padding: 10px;
text-align: center;
border: 1px solid #333;
}
thead {
background-color: #f2f2f2;
}
tfoot {
background-color: #ddd;
font-weight: bold;
}
button {
display: block;
margin: 20px auto;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; text-align: center;">
<h1>DOM Table deleteTFoot() Method Demo</h1>
<table id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Roll No.</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>071717</td>
</tr>
<tr>
<td>Jane</td>
<td>031717</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Table Footer</td>
</tr>
</tfoot>
</table>
<button onclick="removeFooter()">Remove Footer</button>
<script>
function removeFooter() {
document.getElementById('myTable').deleteTFoot();
}
</script>
</body>
</html>
Initially, the table displays with a footer. Clicking the "Remove Footer" button removes the <tfoot> element from the table −
Before: Table with header, body rows (John, Jane), and footer After: Table with header and body rows only (footer removed)
Example − Multiple Footer Handling
Following example shows how deleteTFoot() behaves when called multiple times or on tables without footers −
<!DOCTYPE html>
<html>
<head>
<title>deleteTFoot() Multiple Calls</title>
<style>
table {
margin: 20px auto;
border-collapse: collapse;
}
th, td {
padding: 8px;
border: 1px solid #333;
}
tfoot {
background-color: #ffeb3b;
font-weight: bold;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; text-align: center;">
<h2>Multiple deleteTFoot() Calls</h2>
<table id="testTable">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Laptop</td>
<td>$999</td>
</tr>
<tr>
<td>Mouse</td>
<td>$25</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$1024</td>
</tr>
</tfoot>
</table>
<button onclick="deleteFooter()">Delete Footer</button>
<p id="status"></p>
<script>
let clickCount = 0;
function deleteFooter() {
const table = document.getElementById('testTable');
const footerExists = table.tFoot !== null;
table.deleteTFoot();
clickCount++;
const status = document.getElementById('status');
if (footerExists) {
status.textContent = `Click ${clickCount}: Footer removed successfully.`;
} else {
status.textContent = `Click ${clickCount}: No footer to remove (no error thrown).`;
}
}
</script>
</body>
</html>
The first click removes the footer, and subsequent clicks show that no error occurs when trying to delete a non-existent footer.
How It Works
The deleteTFoot() method works by −
Checking if a
<tfoot>element exists in the tableIf found, removing the entire
<tfoot>element and all its contentsIf no footer exists, the method does nothing and returns without error
The method only affects the first
<tfoot>element if multiple exist (though HTML standards allow only one)
Browser Compatibility
The deleteTFoot() method is supported by all major browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. It is part of the standard DOM Table interface and has been widely supported since early browser versions.
Comparison with Manual Removal
| deleteTFoot() Method | Manual Removal |
|---|---|
| Simple one-line method call | Requires selecting element and calling removeChild() |
| No error if footer doesn't exist | May throw error if element not found |
| Specifically designed for table footers | Generic removal method for any element |
| Automatically handles parent-child relationship | Must manually handle DOM relationships |
Conclusion
The deleteTFoot() method provides a convenient way to remove table footers dynamically. It safely handles cases where no footer exists and requires no parameters, making it simple to use for interactive table modifications in web applications.
119 Views
