How to Remove Column from HTML Table using JavaScript ? Last Updated : 02 Aug, 2024 Comments Improve Suggest changes Like Article Like Report Given an HTML table and the task is to remove the certain column from the HTML table. There are two approaches that are discussed below: Approach 1: First, select the table and also get the rows of table using table.rows. Get the number of columns of a row and go through each one of the columns. Use str.search("someColumnName") (Because, we want to remove the column with some columnName) to match the current column name and the column name that we want to remove. If the column name matches then delete its every cell by .deleteCell(i) method (where, i is the column index) by traversing the each row of the table. Example: This example implements the above approach. html <!DOCTYPE HTML> <html> <head> <title> How to Remove Column from HTML Table using JavaScript ? </title> <style> #myCol { background: green; } table { color: white; margin: 0 auto; } td { padding: 10px; } </style> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <table id="table"> <colgroup> <col id="myCol" span="2"> <col style="background-color:green"> </colgroup> <tr> <th>S.No</th> <th>Title</th> <th>Geek_id</th> </tr> <tr> <td>Geek_1</td> <td>GeekForGeeks</td> <th>Geek_id_1</th> </tr> <tr> <td>Geek_2</td> <td>GeeksForGeeks</td> <th>Geek_id_2</th> </tr> </table> <br> <button onclick="Geeks()"> Click here </button> <p id="GFG_DOWN" style="color:green; font-size: 20px; font-weight: bold;"> </p> <script> function Geeks() { var el_down = document.getElementById("GFG_DOWN"); var tble = document.getElementById('table'); var row = tble.rows; // Getting the rows for (var i = 0; i < row[0].cells.length; i++) { // Getting the text of columnName var str = row[0].cells[i].innerHTML; // If 'Geek_id' matches with the columnName if (str.search("Geek_id") != -1) { for (var j = 0; j < row.length; j++) { // Deleting the ith cell of each row row[j].deleteCell(i); } } } el_down.innerHTML = "Column is removed from the table."; } </script> </body> </html> Output: The first image has the Initial table and After clicking the Click here button the Title Column will be removed from the tableApproach 2: Select the table and get the rows of table using table.rows to traverse through the whole table. Get the column index in a variable (Column that we want to remove). Delete each cell by .deleteCell(i) method (where, i is the column index) by traversing the each row of the table. Example: This example implements the above approach. html <!DOCTYPE HTML> <html> <head> <title> How to Remove Column from HTML Table using JavaScript ? </title> <style> #myCol { background: green; } table { color: white; margin: 0 auto; } td { padding: 10px; } </style> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <table id="table"> <colgroup> <col id="myCol" span="2"> <col style="background-color:green"> </colgroup> <tr> <th>S.No</th> <th>Title</th> <th>Geek_id</th> </tr> <tr> <td>Geek_1</td> <td>GeekForGeeks</td> <th>Geek_id_1</th> </tr> <tr> <td>Geek_2</td> <td>GeeksForGeeks</td> <th>Geek_id_2</th> </tr> </table> <br> <button onclick="Geeks()"> Click here </button> <p id="GFG_DOWN" style="color:green; font-size: 20px; font-weight: bold;"> </p> <script> function Geeks() { var el_down = document.getElementById("GFG_DOWN"); // Getting the table var tble = document.getElementById('table'); // Getting the rows in table. var row = tble.rows; // Removing the column at index(1). var i = 1; for (var j = 0; j < row.length; j++) { // Deleting the ith cell of each row. row[j].deleteCell(i); } el_down.innerHTML = "Column is removed from the table."; } </script> </body> </html> Output:The first image has the Initial table and After clicking the Click here button the Title Column will be removed from the table Comment More infoAdvertise with us Next Article How to Remove Column from HTML Table using JavaScript ? P PranchalKatiyar Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads How to remove an HTML element using JavaScript ? Removing an HTML element using JavaScript involves deleting it from the DOM, typically using methods like element.remove() or parentNode.removeChild(). This approach updates the webpage dynamically, allowing for responsive interactions by removing unwanted or outdated elements based on user actions 3 min read How to remove all rows from a table in JavaScript ? Given an HTML document that contains an HTML table, the task is to remove all rows from the HTML table. Removing all rows is different from removing a few rows. This can be done by using JavaScript. Here we have two Approaches to removing all rows from a table: Table of Content Using remove() metho 2 min read How to Create an HTML Table from an Object Array Using JavaScript ? Tables are a fundamental part of web development, and displaying data in a structured manner is a common requirement. JavaScript provides a powerful way to dynamically generate HTML content, making it easy to create tables from object arrays. Table of Content Using innerHTML propertyUsing appendChil 2 min read How to export HTML table to CSV using JavaScript ? Comma Separated Values or CSV is a type of text file where each value is delimited by a comma. CSV files are very useful for the import and export of data to other software applications.Sometimes while developing web applications, you may come into a scenario where you need to download a CSV file co 6 min read How to Access <tr> element from Table using JavaScript ? Given an HTML table and the task is to access the table element from the Controller and highlight any row that we want. Approach: We will use a basic DOM operation in JavaScript to access table row element. We will be adding highlight class to the row that we click, if the highlight class is already 2 min read How to Convert HTML Table to JSON in JavaScript? HTML tables are commonly used to present structured data on websites. In many scenarios, this tabular data needs to be converted to JSON format for processing, storage, or server communication. We will discuss different approaches to converting HTML tables to JSON using JavaScript.These are the foll 3 min read How to convert JSON data to a html table using JavaScript/jQuery ? To convert JSON data into an HTML table, there are multiple approaches, each of which has its own strengths. Let's walk through both approaches you mentioned, detailing how each one works.Table of ContentUsing for loopUsing JSON.stringify() MethodApproach 1: Using for loopTake the JSON Object in a v 4 min read How to remove the table row in a table using JavaScript ? Removing a table row in JavaScript involves targeting the row element by its index or unique identifier, then using the remove() method to delete it from the DOM. This updates the table dynamically without requiring a page reload. This can be done in two ways: Table of Content JavaScript remove() Me 3 min read How to remove âdisabledâ attribute from HTML input element using JavaScript ? In HTML, we use input elements for user input. The 'disabled' property helps prevent interaction with these elements. For example, if we only want users over 18 to input their Adhar card numbers, we can use JavaScript to remove the 'disabled' attribute when the user enters an age greater than 18. Th 2 min read How to remove specific div element by using JavaScript? Removing a specific `<div>` element with JavaScript is crucial for dynamic web content management. Whether updating information, responding to user actions, or optimizing performance by cleaning the DOM, efficient DOM manipulation is essential. JavaScript offers diverse methods such as `remove 3 min read Like