How to remove the table row in a table using JavaScript ? Last Updated : 14 May, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report 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() Method Using DOM deleteRow() methodJavaScript remove() Method This method removes the selected elements along with text and child nodes. This method also removes data and events of the selected elements. Syntax:node.remove();Example 1: This example first selects the row by id value and then removes it by using the remove() method. html <!DOCTYPE html> <html lang="en"> <head> <title> How to remove the table row in a table using JavaScript ? </title> <style> table { margin: auto; } table, th, tr, td { border: 1px solid black; } </style> </head> <body style="text-align: center;"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3> Remove Table Row from a Table </h3> <table> <tr> <th>S.No</th> <th>Title</th> <th>Geek_id</th> </tr> <tr id="row1"> <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> <script> function Geeks() { document.getElementById("row1").remove(); } </script> </body> </html> Output: Removing table row using remove() methodExample 2: This example first selects the row by using the tag name and then removes the appropriate element by index using the remove() method. html <!DOCTYPE html> <html lang="en"> <head> <title> How to remove the table row in a table using JavaScript ? </title> <style> table { margin: auto; } table, th, tr, td { border: 1px solid black; } </style> </head> <body style="text-align: center;"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3> Remove Table row from a Table </h3> <table> <tr> <th>S.No</th> <th>Title</th> <th>Geek_id</th> </tr> <tr id="row1"> <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> <script> function Geeks() { document.getElementsByTagName("tr")[2].remove(); } </script> </body> </html> Output: Using DOM deleteRow() methodThis method is used for removing an <tr> element from a table. Syntax:tableObject.deleteRow(index);Example: In this example, we will see the use of deleteRow() method. JavaScript <!DOCTYPE html> <html lang="en"> <head> <title> How to remove the table row in a table using JavaScript ? </title> <style> table { margin: auto; } table, th, tr, td { border: 1px solid black; } </style> </head> <body style="text-align: center;"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3> Remove Table row from a Table </h3> <table id="newtable"> <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="document.getElementById( 'newtable').deleteRow(1)"> Click Here </button> </body> </html> Output: 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 table row from table using jQuery ? Removing a table row using jQuery involves selecting a specific row within an HTML table and deleting it dynamically. This can be done through various methods like .remove() or .detach(), allowing developers to manipulate the table structure efficiently without reloading the page.Here we have some c 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 add table row in a table using jQuery? In jQuery, adding a row to a table refers to dynamically inserting a new table row (<tr>) into an existing HTML table. This functionality allows developers to update and manage table content in real-time, enhancing interactivity and user experience without reloading the page.Steps to add table 2 min read 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 3 min read How to hide the table header using JavaScript ? In this article, we will see the methods to hide the table header using JavaScript. There are two approaches that can help to hide a table header with the help of JavaScript. They are discussed below: Using style and display propertyUsing jQuery hide Method Approach 1: Select the header using a CSS 2 min read 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 Like