How to remove table row from table using jQuery ?

Last Updated : 24 Sep, 2024

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 common approaches to remove table row from table using jQuery :

Table of Content

Approach 1: Using .remove() Method

The .remove() method in jQuery allows you to delete a specific row from an HTML table by selecting it with a jQuery selector. This completely removes the row and its content from the DOM, without leaving any trace.

Syntax

$(selector).remove(selector)

Example : In this example we removes a specific table row with the ID row1 using the jQuery .remove() method. When the button is clicked, the first row of the table is deleted.

html

<!DOCTYPE HTML> <html>  <head>      <title>         How to remove a table row         from table     </title>      <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">     </script>      <style>         #myCol {             background: green;         }          table {             color: white;         }          #Geek_p {             color: green;             font-size: 30px;         }          td {             padding: 10px;         }     </style> </head>  <body>     <center>         <h1 style="color:green;">             GeeksForGeeks         </h1>          <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 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 to remove table row from table -->         <script>             function Geeks() {                 $("#row1").remove();             }         </script>     </center> </body>  </html>

Output:

Deleting-table-row — Using .remove() Method to remove table row from table

Approach 2: Using .detach() Method

The .detach() method in jQuery removes a table row from the DOM while keeping the row's data and events in memory. This allows for temporary removal and potential reinsertion of the row at a later time.

Syntax:

$(selector).detach()

Example: In this example we removes a table row with the ID row1 using the jQuery .detach() method. The row is stored in memory for possible reinsertion when the button is clicked.

HTML

<!DOCTYPE HTML> <html>  <head>      <title>         How to remove a table row         from table     </title>      <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">     </script>      <style>         #myCol {             background: green;         }          table {             color: white;         }          #Geek_p {             color: green;             font-size: 30px;         }          td {             padding: 10px;         }     </style> </head>  <body>     <center>         <h1 style="color:green;">             GeeksForGeeks         </h1>          <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 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 to detach table row from table -->         <script>             let detachedRow;              function Geeks() {                 // Detach row1 but keep it in memory                 detachedRow = $("#row1").detach();               }         </script>     </center> </body>  </html>

Output:

jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it's philosophy of “Write less, do more". You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.

How to remove the table row in a table using JavaScript ?

PranchalKatiyar

Improve

Article Tags :

How to remove table row from table using jQuery ?

Approach 1: Using .remove() Method

Approach 2: Using .detach() Method

Similar Reads