Open In App

HTML DOM TableRow deleteCell() Method

Improve
Improve
Like Article
Like
Save
Share
Report

The TableRow deleteCell() Method in HTML DOM is used to delete a cell from a current row in a Table. It is a predefined method of the TableRow Object. 

Syntax:

tablerowObject.deleteCell(index)

Property Values:

index: It contains a numeric value that starts from 0 which defines the position of the cell to be deleted from the current row. For example- The value 0th indicates the first positioned cell to be deleted. The value -1th represent that delete the last positioned cell. 

Note:

  • The parameter is to be defined mandatory in the Firefox and Opera browser. On the other hand, it is optional in safari, chrome and IE Browsers.
  • If this parameter is not contain any value, it  deleteCell() delete the last cell in IE and the first cell in Chrome and Safari.

Example: In this example, we will delete the first and last cell from the current row. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML DOM TableRow deleteCell() Method
    </title>
 
    <style>
        table,
        td {
            border: 1px solid green;
        }
 
        h1 {
            color: green;
        }
 
        h2 {
            font-family: Impact;
        }
 
        body {
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
 
    <h2>
        HTML DOM TableRow deleteCell() Method
    </h2>
 
    <table align="center">
        <tr id="gfg">
            <td>GEEKS</td>
            <td>FOR</td>
            <td>GEEKS</td>
        </tr>
    </table>
    <br>
    <button onclick="firstCell()">
        Delete the First Cell
    </button>
    <button onclick="lastCell()">
        Delete the Last Cell
    </button>
    <script>
        function firstCell() {
            var Cell =
                document.getElementById("gfg");
            Cell.deleteCell(0);
        }
        function lastCell() {
            var MyCell = document.getElementById("gfg");
            MyCell.deleteCell(-1);
        }
    </script>
</body>
 
</html>


Output:



Last Updated : 15 Jul, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads