{"id":861,"date":"2012-06-08T09:32:12","date_gmt":"2012-06-08T09:32:12","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=861"},"modified":"2012-06-08T09:32:12","modified_gmt":"2012-06-08T09:32:12","slug":"jquery-remove-column-remove-column-from-table-using-jquery-examples","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-remove-column-remove-column-from-table-using-jquery-examples\/","title":{"rendered":"jQuery Remove Column From Table Examples"},"content":{"rendered":"

Ever wanted to remove column from table or remove multiple columns 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 column using jQuery.<\/p>\n

How to Remove Single Column or Multiple Columns 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>Remove Table Columns<\/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<thead>\n<tr>\n<th>H1<\/th>\n<th>H2<\/th>\n<th>H3<\/th>\n<th>H4<\/th>\n<\/tr>\n<\/thead>\n<tr>\n<td>1<\/td>\n<td>6<\/td>\n<td>11<\/td>\n<td>16<\/td>\n<\/tr>\n<tr>\n<td>2<\/td>\n<td>7<\/td>\n<td>12<\/td>\n<td>17<\/td>\n<\/tr>\n<tr>\n<td>3<\/td>\n<td>8<\/td>\n<td>13<\/td>\n<td>18<\/td>\n<\/tr>\n<tr>\n<td>4<\/td>\n<td>9<\/td>\n<td>14<\/td>\n<td>19<\/td>\n<\/tr>\n<tr>\n<td>5<\/td>\n<td>10<\/td>\n<td>15<\/td>\n<td>20<\/td>\n<\/tr>\n<\/table>\n\n<button id=\"remove_column\">Remove Column<\/button>\n\n<\/body>\n<\/html><\/pre>\n
In this example, we are going to remove table columns when the “Remove Column” 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 column and \/ or remove multiple columns from table using jQuery<\/strong>. The acutal code will be following by additional code that you can use to remove the headers as well, if they exist in your table.<\/p>\n
Example 1 (a): Remove all Columns except first column of table using jQuery<\/h3>\n
<script type=\"text\/javascript\">\n\n$(document).ready(function() {\n\n$(\"#remove_column\").click( function() {\n\n\/\/Remove all columns except first column\n\n$('#my_table td:not(:nth-child(1))').remove();\n\n\/\/Remove all columns except first column along with Header\n\n$('#my_table th:not(:nth-child(1)), #my_table td:not(:nth-child(1))').remove();\n\n});\n\n});\n\n<\/script><\/pre>\n
Example 1 (b): Remove all Columns except first column of table using jQuery<\/h3>\n
<script type=\"text\/javascript\">\n\n$(document).ready(function() {\n\n$(\"#remove_column\").click( function() {\n\n\/\/Alternate way to Remove all columns except first column\n\n$(\"#my_table\").find(\"td:not(:nth-child(1))\").remove();\n\n\/\/Alternate way to Remove all columns except first column along with Header\n\n$(\"#my_table\").find(\"th:not(:nth-child(1)), td:not(:nth-child(1))\").remove();\n\n});\n\n});\n\n<\/script><\/pre>\n
Example 2: Remove only second column of table using jQuery<\/h3>\n
<script type=\"text\/javascript\">\n\n$(document).ready(function() {\n\n$(\"#remove_column\").click( function() {\n\n\/\/Remove only 2nd column\n\n$('#my_table td:nth-child(2)').remove();\n\n\/\/Remove only 2nd column along with Header\n\n$('#my_table th:nth-child(2), #my_table td:nth-child(2)').remove();\n\n});\n\n});\n\n<\/script><\/pre>\n
Example 3: Remove only third column of table using jQuery<\/h3>\n
<script type=\"text\/javascript\">\n\n$(document).ready(function() {\n\n$(\"#remove_column\").click( function() {\n\n\/\/Remove only 3rd column\n\n$('#my_table td:nth-child(3)').remove();\n\n\/\/Remove only 3rd column along with Header\n\n$('#my_table th:nth-child(3), #my_table td:nth-child(3)').remove();\n\n});\n\n});\n\n<\/script><\/pre>\n
Example 4: Remove all Columns except second column of table using jQuery<\/h3>\n
<script type=\"text\/javascript\">\n\n$(document).ready(function() {\n\n$(\"#remove_column\").click( function() {\n\n\/\/Remove all columns except second\n\n$('#my_table td:not(:nth-child(2))').remove();\n\n\/\/Remove all columns except second along with Header\n\n$('#my_table th:not(:nth-child(2)), #my_table td:not(:nth-child(2))').remove();\n\n});\n\n});\n\n<\/script><\/pre>\n
Example 5: Remove last column of table using jQuery<\/h3>\n
<script type=\"text\/javascript\">\n\n$(document).ready(function() {\n\n$(\"#remove_column\").click( function() {\n\n\/\/Remove last column\n\n$('#my_table td:last-child').remove();\n\n\/\/Remove last column along with Header\n\n$('#my_table th:last-child, #my_table td:last-child').remove();\n\n});\n\n});\n\n<\/script><\/pre>\n
Example 6: Remove all Columns except last column of table using jQuery<\/h3>\n
<script type=\"text\/javascript\">\n\n$(document).ready(function() {\n\n$(\"#remove_column\").click( function() {\n\n\/\/Remove all columns except last column\n\n$('#my_table td:not(:last-child)').remove();\n\n\/\/Remove all columns except last column along with Header\n\n$('#my_table th:not(:last-child), #my_table td:not(:last-child)').remove();\n});\n\n});\n\n<\/script><\/pre>\n
As you see, all it takes is just 1 line of code to remove the column that you desire.<\/p>\n
Your Turn!<\/h5>\n
Do you know of any other ways to remove table column or remove columns from table using jQuery<\/strong><\/em>? Share your answers by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"
Ever wanted to remove column from table or remove multiple columns from a table using jQuery? In this article, I am going to show you with examples, how easy it is to remove \/ delete table column 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-861","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-dT","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/861","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=861"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/861\/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=861"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=861"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=861"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}