Javascript Reference - HTML DOM TableRow deleteCell() Method

The deleteCell() method deletes a cell in the current table row.

Browser Support


`deleteCell`	Yes	Yes	Yes	Yes	Yes

Syntax

tablerowObject.deleteCell(index)

Parameter Values

Value	Description
index	Required in Firefox and Opera, optional in IE, Chrome and Safari. An integer starting at 0 sets the position of the cell to delete in the current row.

Return Value

No return value.

Example

The following code shows how to Delete the last cell(s) from the a table row with id="myRow".


<!DOCTYPE html>
<html>
<head>
<style>
table, td {<!--from   w  w w  . j  a  v a 2  s  .c  o m-->
    border: 1px solid black;
}
</style>
</head>
<body>
<table>
  <tr id="myRow">
    <td>First cell</td>
    <td>Second cell</td>
    <td>Third cell</td>
  </tr>
</table><br>
<button onclick="myFunction()">test</button>
<script>
function myFunction() {
    var row = document.getElementById("myRow");
    row.deleteCell(-1);
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to delete cell(s) from the index position 1 in a table row with id="myRow".


<!DOCTYPE html>
<html>
<head>
<style>
table, td {<!--from  ww w  .j  a v a 2s  .  co  m-->
    border: 1px solid black;
}
</style>
</head>
<body>
<table>
  <tr id="myRow">
    <td>First cell (index 0)</td>
    <td>Second cell (index 1)</td>
    <td>Third cell (index 2)</td>
  </tr>
</table><br>

<button onclick="myFunction()">test</button>

<script>
function myFunction() {
    var row = document.getElementById("myRow");
    row.deleteCell(1);
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to delete cell(s) at the beginning of the first table row.


<!DOCTYPE html>
<html>
<head>
<style>
table, td {<!--from w w  w  .j av a  2  s .  co m-->
    border: 1px solid black;
}
</style>
</head>
<body>
<table id="myTable">
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
    <td>Third cell</td>
  </tr>
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
    <td>Third cell</td>
  </tr>
</table><br>

<button onclick="myFunction()">test</button>

<script>
function myFunction() {
    var firstRow = document.getElementById("myTable").rows[0];
    firstRow.deleteCell(0);
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 5

The following code shows how to delete the first cell(s) from a table row with id="myRow".


<!DOCTYPE html>
<html>
<head>
<style>
table, td {<!--from ww w  . j av a2 s . co  m-->
    border: 1px solid black;
}
</style>
</head>
<body>
<table>
  <tr id="myRow">
    <td>First cell</td>
    <td>Second cell</td>
    <td>Third cell</td>
  </tr>
</table><br>

<button onclick="myFunction()">test</button>

<script>
function myFunction() {
    var row = document.getElementById("myRow");
    row.deleteCell(0);
}
</script>

</body>
</html>

The code above is rendered as follows: