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
How to Remove Column from HTML Table using JavaScript?
In HTML, tables display data in a structured format with columns and rows. Sometimes you need to dynamically remove columns from a table, such as when a user wants to hide unnecessary data or when the table structure needs to change based on user interactions.
JavaScript provides several methods to remove table columns. The most common approach is using the deleteCell() method, which removes cells by index. You can also remove columns by header text or class name for more flexible implementations.
Syntax
The basic syntax for removing a column using deleteCell():
for (var i = 0; i < rowCount; i++) {
table.rows[i].deleteCell(index);
}
This loops through each table row and deletes the cell at the specified index position (zero-based).
Method 1: Removing Column by Index
The simplest approach is to remove a column by its index position. This example removes the third column (index 2) from a table:
<html>
<head>
<style>
table {
border-collapse: collapse;
margin: 20px 0;
}
td, th {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h3>Remove Table Column by Index</h3>
<table id="numberTable">
<tr>
<th>First</th>
<th>Second</th>
<th>Third</th>
<th>Fourth</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
<button onclick="deleteColumnByIndex()">Delete Third Column</button>
<script>
function deleteColumnByIndex() {
var table = document.getElementById("numberTable");
var rowCount = table.rows.length;
let columnIndex = 2; // Third column (zero-based index)
for (var i = 0; i < rowCount; i++) {
table.rows[i].deleteCell(columnIndex);
}
}
</script>
</body>
</html>
Method 2: Removing Column by Header Text
This method finds a column by its header text and removes it. More flexible when you don't know the exact column index:
<html>
<head>
<style>
table {
border-collapse: collapse;
margin: 20px 0;
}
td, th {
border: 1px solid #ddd;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h3>Remove Column by Header Text</h3>
<table id="foodTable">
<tr>
<th>Food Name</th>
<th>Price</th>
<th>Calories</th>
</tr>
<tr>
<td>Apple</td>
<td>$1.99</td>
<td>95</td>
</tr>
<tr>
<td>Banana</td>
<td>$0.89</td>
<td>105</td>
</tr>
<tr>
<td>Orange</td>
<td>$2.29</td>
<td>85</td>
</tr>
</table>
<button onclick="deleteColumnByHeader()">Delete Calories Column</button>
<script>
function deleteColumnByHeader() {
var table = document.getElementById('foodTable');
var headerRow = table.getElementsByTagName('tr')[0];
var headers = headerRow.getElementsByTagName('th');
var columnIndex = -1;
// Find the column index by header text
for (var i = 0; i < headers.length; i++) {
if (headers[i].innerHTML === "Calories") {
columnIndex = i;
break;
}
}
// Delete the column if found
if (columnIndex !== -1) {
var rowCount = table.rows.length;
for (var i = 0; i < rowCount; i++) {
table.rows[i].deleteCell(columnIndex);
}
}
}
</script>
</body>
</html>
Method 3: Removing Multiple Columns by Class Name
This approach removes all columns that have a specific CSS class, useful for removing multiple columns at once:
<html>
<head>
<style>
table {
border-collapse: collapse;
margin: 20px 0;
}
td, th {
border: 1px solid #ddd;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
.extra {
background-color: #ffe6e6;
}
</style>
</head>
<body>
<h3>Remove Multiple Columns by Class Name</h3>
<table id="dataTable">
<tr>
<th>Column 1</th>
<th class="extra">Column 2</th>
<th>Column 3</th>
<th class="extra">Column 4</th>
</tr>
<tr>
<td>Row 1, Col 1</td>
<td class="extra">Row 1, Col 2</td>
<td>Row 1, Col 3</td>
<td class="extra">Row 1, Col 4</td>
</tr>
<tr>
<td>Row 2, Col 1</td>
<td class="extra">Row 2, Col 2</td>
<td>Row 2, Col 3</td>
<td class="extra">Row 2, Col 4</td>
</tr>
</table>
<button onclick="deleteColumnsByClass()">Remove Extra Columns</button>
<script>
function deleteColumnsByClass() {
var table = document.getElementById('dataTable');
var rows = table.getElementsByTagName('tr');
// Iterate through each row
for (var i = 0; i < rows.length; i++) {
var cells = rows[i].getElementsByClassName('extra');
// Remove all cells with 'extra' class
while (cells.length > 0) {
cells[0].parentNode.removeChild(cells[0]);
}
}
}
</script>
</body>
</html>
Comparison of Methods
| Method | Use Case | Flexibility | Performance |
|---|---|---|---|
| By Index | Known column position | Low | Fast |
| By Header Text | Dynamic column identification | Medium | Medium |
| By Class Name | Multiple columns removal | High | Slower |
Key Points
- Table columns use zero-based indexing (first column is index 0)
- Always check if the column exists before attempting deletion
- When removing multiple columns, start from the highest index to avoid shifting issues
- The
deleteCell()method is the most reliable approach for single column removal
Conclusion
JavaScript provides flexible methods to remove table columns dynamically. Use deleteCell() by index for simple cases, header text matching for dynamic scenarios, and class-based removal for multiple columns. Choose the method that best fits your specific use case and table structure.
4K+ Views
