With JavaScript DOM delete rows in a table?

To delete rows in a table in JavaScript, use the DOM deleteRow() method.

Example

You can try to run the following code to learn how to delete rows in a table. The code deletes rows one at a time ?

<!DOCTYPE html>
<html>
  <head>
   <script>
   function captionFunc(x) {
     document.getElementById(x).createCaption().innerHTML = "Demo Caption";
   }
   </script>
  </head>
  <body>
   <table style="border:2px solid black" id="newtable">
     <tr>
      <td>One</td>
      <td>Two</td>
     </tr>
     <tr>
      <td>Three</td>
      <td>Four</td>
     </tr>
     <tr>
      <td>Five</td>
      <td>Six</td>
     </tr>
   </table>
   <p>
     <input type="button" onclick="captionFunc('newtable')" value="Display Table Caption">
   </p>
   <p>
     <input type="button" value="Delete Row" onclick="document.getElementById('newtable').deleteRow(0)">
   </p>
  </body>
</html>
Updated on: 2020-06-23T07:33:28+05:30

6K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements