{"id":857,"date":"2012-06-08T08:09:44","date_gmt":"2012-06-08T08:09:44","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=857"},"modified":"2012-06-08T08:09:44","modified_gmt":"2012-06-08T08:09:44","slug":"jquery-table-remove-row-remove-multiple-rows-from-table-examples","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-table-remove-row-remove-multiple-rows-from-table-examples\/","title":{"rendered":"jQuery Table Remove Rows Examples"},"content":{"rendered":"

Ever wanted to remove single row from table or remove multiple rows from a table using jQuery<\/strong><\/em>? In this article, I am going to show you with examples, how easy it is to remove \/ delete table row using jQuery.<\/p>\n

How to Remove Single Row or Multiple Rows From A Table using jQuery<\/h2>\n

Following is the HTML source code I used for the examples:<\/p>\n

HTML Source:<\/strong><\/p>\n

<html>\n<head>\n<title>jQuery Table Remove Row | Remove Multiple Rows from Table Examples<\/title>\n<script type=\"text\/javascript\" src=\"js\/jquery-1.8.2.min.js\"><\/script>\n<\/head>\n\n<body>\n<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" id=\"my_table\">\n<tr>\n<td>1<\/td>\n<td>6<\/td>\n<\/tr>\n<tr>\n<td>2<\/td>\n<td>7<\/td>\n<\/tr>\n<tr>\n<td>3<\/td>\n<td>8<\/td>\n<\/tr>\n<tr>\n<td>4<\/td>\n<td>9<\/td>\n<\/tr>\n<tr>\n<td>5<\/td>\n<td>10<\/td>\n<\/tr>\n<\/table>\n\n<button id=\"remove_row\">Remove Row<\/button>\n\n<\/body>\n<\/html><\/pre>\n
In this example, we are going to remove table rows when the “Remove Row” button is clicked. So all code will go into the click event of the button. With that in mind, let’s take a look at how you can remove a single row and \/ or remove multiple rows from table using jQuery.<\/p>\n
Example 1 (a): Remove all Rows except first row of table using jQuery<\/h3>\n
<script type=\"text\/javascript\">\n\n$(document).ready(function() {\n\n$(\"#remove_row\").click( function() {\n\n\/\/Remove all rows except first row\n\n\/\/$(\"#my_table\").find(\"tr:gt(0)\").remove();\n\n});\n\n});\n\n<\/script><\/pre>\n
Example 1 (b): Remove all Rows except first row of table using jQuery<\/h3>\n
<script type=\"text\/javascript\">\n\n$(document).ready(function() {\n\n$(\"#remove_row\").click( function() {\n\n\/\/Alternate way to Remove all rows except first row\n\n$(\"#my_table\").find(\"tr:not(:first)\").remove();\n\n});\n\n});\n\n<\/script><\/pre>\n
Example 2: Remove only second row of table using jQuery<\/h3>\n
<script type=\"text\/javascript\">\n\n$(document).ready(function() {\n\n$(\"#remove_row\").click( function() {\n\n\/\/Remove only 2nd row\n\n$(\"#my_table\").find(\"tr:eq(1)\").remove();\n\n});\n\n});\n\n<\/script><\/pre>\n
Example 3: Remove only third row of table using jQuery<\/h3>\n
<script type=\"text\/javascript\">\n\n$(document).ready(function() {\n\n$(\"#remove_row\").click( function() {\n\n\/\/Remove only 3rd row\n\n\/\/$(\"#my_table\").find(\"tr:eq(2)\").remove();\n\n});\n\n});\n\n<\/script><\/pre>\n
Example 4: Remove all Rows except second row of table using jQuery<\/h3>\n
<script type=\"text\/javascript\">\n\n$(document).ready(function() {\n\n$(\"#remove_row\").click( function() {\n\n\/\/Remove all rows except second\n\n$(\"#my_table\").find(\"tr:not(:eq(1))\").remove();\n\n});\n\n});\n\n<\/script><\/pre>\n
Example 5: Remove last row of table using jQuery<\/h3>\n
<script type=\"text\/javascript\">\n\n$(document).ready(function() {\n\n$(\"#remove_row\").click( function() {\n\n\/\/Remove last row\n\n$('#my_table tr:last').remove();\n\n});\n\n});\n\n<\/script><\/pre>\n
Example 6: Remove all Rows except last row of table using jQuery<\/h3>\n
<script type=\"text\/javascript\">\n\n$(document).ready(function() {\n\n$(\"#remove_row\").click( function() {\n\n\/\/Remove all rows except last row\n\n$(\"#my_table\").find(\"tr:not(:last)\").remove();\n\n});\n\n});\n\n<\/script><\/pre>\n
As you see, all it takes is just 1 line of code to remove the row that you desire.<\/p>\n
Your Turn!<\/h5>\n
Do you know of any other ways to remove table row or remove rows from table using jQuery<\/strong>? Share your answers by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"
Ever wanted to remove single row from table or remove multiple rows from a table using jQuery? In this article, I am going to show you with examples, how easy it is to remove \/ delete table row using jQuery.<\/p>\n","protected":false},"author":1,"featured_media":395,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[20,13],"tags":[75,41],"class_list":["post-857","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-tips-and-tricks","category-tips-and-tricks","tag-jquery-table","tag-jquery-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-dP","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/857","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/comments?post=857"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/857\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/media?parent=857"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=857"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=857"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}