How to remove table row from table using jQuery ?
Last Updated :
11 Jul, 2025
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 :
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:
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:
Using .detach() Method to remove table row from table 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.
Similar Reads
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 Dynamically Add/Remove Table Rows using jQuery? We will dynamically add/remove rows from an HTML table using jQuery. jQuery provides us with a lot of methods to perform various tasks. To dynamically add and remove the rows from an HTML table, we are also going to use some of these jQuery methods like append(), remove(), etc.Adding a rowTo add a r
3 min read
How to select all even/odd rows in table using jQuery ? In this article, we will see how to make a table by selecting the alternate rows i.e. selecting the even or odd rows by clicking on the respective buttons. This feature can be useful at the time of selecting the specific data/elements of either of the rows or to highlight the table of data for displ
3 min read
How to remove options from select element using jQuery ? Removing options from a select element using jQuery means programmatically deleting specific or all <option> elements within a <select> dropdown. This can be done using jQuery methods like remove() or empty(), allowing dynamic updates of the dropdown's available choices based on conditio
3 min read
How to Delete All Table Rows Except First One using jQuery? To delete all table rows except the first one using jQuery, you can target the rows and remove them while keeping the first row intact.ApproachFirst, we create a table using <table> tag and add a button containing btn id. When a user clicks on the button, then the jQuery function is called. Th
1 min read
How to remove all paragraphs from the DOM using jQuery ? To remove elements and content, we use jQuery remove() method which removes the selected element as well as everything inside it, also it will remove all bound events associated with that target element. Syntax: $(selector).remove() Example : HTML <!DOCTYPE html> <html> <head> <
1 min read