How to Remove Column from HTML Table using JavaScript ?

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Approach 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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.