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 deleteCaption() Method
The HTML DOM table deleteCaption() method removes the first <caption> element from a table in an HTML document. This method is useful when you need to dynamically remove table captions after the page has loaded.
Syntax
Following is the syntax for the deleteCaption() method −
tableObject.deleteCaption()
Parameters
This method does not accept any parameters.
Return Value
The method returns undefined. It simply removes the caption element if it exists, or does nothing if no caption is present.
How It Works
The deleteCaption() method searches for the first <caption> element within the specified table and removes it from the DOM. If the table contains multiple caption elements, only the first one is deleted. If no caption exists, the method executes without error but performs no action.
Example
Following example demonstrates the HTML DOM table deleteCaption() method −
<!DOCTYPE html>
<html>
<head>
<title>DOM Table deleteCaption() Method</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
}
table {
margin: 20px auto;
border-collapse: collapse;
}
caption {
color: #d9534f;
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
th, td {
border: 1px solid #ddd;
padding: 8px 12px;
}
th {
background-color: #f5f5f5;
}
button {
background-color: #d9534f;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
margin: 10px;
}
button:hover {
background-color: #c9302c;
}
</style>
</head>
<body>
<h1>DOM Table deleteCaption() Method Demo</h1>
<table id="studentTable">
<caption>Student Data</caption>
<tr>
<th>Name</th>
<th>Roll No.</th>
<th>Grade</th>
</tr>
<tr>
<td>John</td>
<td>071717</td>
<td>A</td>
</tr>
<tr>
<td>Jane</td>
<td>031717</td>
<td>B+</td>
</tr>
</table>
<button onclick="removeCaption()">Remove Caption</button>
<button onclick="addCaption()">Add Caption</button>
<script>
function removeCaption() {
var table = document.getElementById('studentTable');
table.deleteCaption();
}
function addCaption() {
var table = document.getElementById('studentTable');
if (!table.caption) {
table.createCaption().innerHTML = "Student Data";
}
}
</script>
</body>
</html>
The output shows a table with a caption. Clicking "Remove Caption" deletes it, and clicking "Add Caption" restores it −
DOM Table deleteCaption() Method Demo Student Data ??????????????????????????????? ? Name ? Roll No. ? Grade ? ??????????????????????????????? ? John ? 071717 ? A ? ? Jane ? 031717 ? B+ ? ??????????????????????????????? [Remove Caption] [Add Caption]
Example − Multiple Captions
Following example shows how deleteCaption() handles multiple caption elements −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Captions Example</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; padding: 20px; }
table { margin: 20px auto; border-collapse: collapse; }
caption { color: #5bc0de; font-weight: bold; margin: 5px 0; }
th, td { border: 1px solid #ddd; padding: 8px 12px; }
button { background-color: #5bc0de; color: white; border: none; padding: 8px 16px; margin: 5px; cursor: pointer; }
</style>
</head>
<body>
<h2>Multiple Captions Test</h2>
<table id="multiTable">
<caption>First Caption</caption>
<caption>Second Caption</caption>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Laptop</td>
<td>$800</td>
</tr>
</table>
<button onclick="deleteFirst()">Delete First Caption</button>
<button onclick="showCaptions()">Show Caption Count</button>
<p id="result"></p>
<script>
function deleteFirst() {
var table = document.getElementById('multiTable');
table.deleteCaption();
showCaptions();
}
function showCaptions() {
var table = document.getElementById('multiTable');
var captionCount = table.querySelectorAll('caption').length;
document.getElementById('result').textContent =
'Caption count: ' + captionCount;
}
// Show initial count
showCaptions();
</script>
</body>
</html>
This example demonstrates that deleteCaption() removes only the first caption element, leaving subsequent captions intact.
Browser Compatibility
The deleteCaption() method is supported in all major browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. It has been part of the DOM specification since early versions and provides consistent behavior across different platforms.
Key Points
-
The method removes only the first
<caption>element if multiple captions exist. -
If no caption exists, the method executes without throwing an error.
-
The method does not return the deleted caption element − it returns
undefined. -
Use
createCaption()method to add a new caption element to the table. -
The deleted caption is completely removed from the DOM and cannot be recovered unless recreated.
Conclusion
The HTML DOM table deleteCaption() method provides a simple way to remove table captions dynamically. It safely removes the first caption element without parameters or error handling, making it useful for interactive table management where captions need to be toggled or removed based on user actions.
115 Views
