Oct 11 2017

Remove HTML Table Row and Column using jQuery

by Ran Enoch
Remove HTML Table Row and Column using jQuery
The ability to remove rows or columns from the HTML table is a nice feature to have as it allows users to temporarily remove unnecessary information from the UI. This may be quite useful especially when printing a large HTML table - allowing the user to first remove the rows and then print what is needed. This post walks us through the process of removing table rows or columns using jQuery. Please note that this jQuery solution only removes the rows/columns from the UI, not from the actual database.

HTML Markup

To get started, create a standard HTML table on the page. For this demo, our table has 3 columns: Name, Age and Country (along with some random data). The table row/column will be deleted upon click of the row/column itself.

Name Age Country
Maria Anders 30 Germany
Francisco Chang 24 Mexico
Roland Mendel 100 Austria
Helen Bennett 28 UK
Yoshi Tannamuri 35 Canada
Giovanni Rovelli 46 Italy
Alex Smith 59 USA

CSS

The following CSS classes are used to style the table and its rows. There are also styles defined to provide alternate colors to the table rows.

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
th {
  background-color: #ccd;
}
tr:nth-child(even) {
  background-color: #dddddd;
}
tr:nth-child(odd) {
  background-color: #ddeedd;
}

Remove Table Row using jQuery

Removing a table row is pretty simple. All you need to do is attach the click event to every tr with only td, not th. On click event remove the clicked row. Like this:

$(document).ready(function() {
  $("#tblData tr:has(td)").click(function() {
      $(this).remove();
  });
});

You can also add some animation while removing the table rows for a better user experience. Like this:

$(document).ready(function() {
  $("#tblData tr:has(td)").click(function() {
    $(this).fadeOut(500, function() {
      $(this).remove();
    });
  });
});

The above code uses fadeout animation to remove the row from the UI. You can check out the demo to see the finished result!
The above approach removes the HTML table row on click of the row itself, but the ideal way is to have a button in every row that removes the row. To implement this, we’ll have to modify the HTML table markup to accommodate the button. So, let’s go ahead and add a new header column and a new td with a delete button. Like this:

Name
Age
Country
Action
Maria Anders
30
Germany

You will need to add the button in every table row. To delete the row when the delete button is clicked simply attach a click event to all the delete buttons. All the delete buttons will be assigned “delete” CSS class and we’ll use a class selector to select them and then use the closest method to find the row and remove it. Like this:

$(document).ready(function() {
  $('#tblData').on('click', '.delete', function() {
    $(this).closest('tr').remove();
  });
});
The closest method returns the first element that matches the selector. It starts the search from the current element and progresses up through the DOM tree until it finds a match. Here, an important thing to note is the way the click event is attached. The following jQuery code uses delegate event approach to attach the click event to all the delete buttons.
$('#tblData').on('click', '.delete', function() { 
jQuery .on method has 2 ways to attach events: Direct and Delegate. When a selector is passed, it is considered a delegate event. In this case, the selector is '.delete'. Passing selector is optional. If it’s not present, it is a direct event. The difference between direct and delegate events is that the latter works for dynamically added elements. Direct event only works for the element present on the page at the time of binding the event. It is a best practice to use delegate events as in the future when elements are added dynamically, you won’t have to modify the code.
You can check out the code in action at the following link!
Remember: the above jQuery code only removes the row from the DOM. You need to code to remove the deleted table row data from the database.

Remove table column using jQuery

To remove a column, it is not ideal to assign a delete button like we did for removing rows. Instead, the column will be removed when the column header is clicked. In the jQuery code, we need to attach a click event to the table header. First, take a look at the complete jQuery code.

$(document).ready(function() {
  $("#tblData tr:has(th)").mouseover(function(e) {
    $(this).css("cursor", "pointer");
  });
  $("#tblData th").click(function() {
    var iIndex = $(this).closest("th").prevAll("th").length;
    $(this).parents("#tblData").find("tr").each(function() {
      $(this).find("td:eq(" + iIndex + ")").remove();
      $(this).find("th:eq(" + iIndex + ")").remove();
    });
  });
});

This jQuery code performs the following functions:

• First, it attaches a mouseover event to all TD elements to change the mouse cursor to hand style. This tells users that the cell is clickable.

• The code then attaches a click event to the table header columns. Before removing the column, we need to determine the index of the clicked header column. The code uses jQuery selectors closest() and prevAll() to determine the index. The .closest() begins with the current element and travels up the DOM tree until it finds a matching element and the jQuery selector .prevAll() searches all the predecessors of the current element in the DOM tree. Once we have the index value, we can run a loop for each table row to remove td and th based on the index value. Or, instead of removing it, we can hide the td and th by setting the CSS to "display: none".

You can check out the code in action here!

Conclusion

This post walks us through the process of using a jQuery solution to remove HTML table rows/columns on click action. It also describes the process of implementing delete buttons in every row in order to easily remove the row. The jQuery solution uses the closest and prevAll methods to select the column. Based on your needs, you can easily modify the code to take further action on the removed row/column.


Responsive Menu
Add more content here...