Question

I have a table with many rows (+50) and cells (+50). Now I would like to remove the n first or last cells with jQuery. Currently I have the following code:

var n = 10;
var last = true;
for (var i = 0; i < n; i++) {
   table.find('tr').each(function() {
      if(last)          
         $(this).find('td:last').remove();
      else
         $(this).find('td:first').remove();
   });
}

Note: table is a jQuery element.

The code works, but performs very slow when I have a table with 50 rows with 50 cells and I remove the 10 last cells. Any ideas how to optimize the code?

Edit: I’ve added the first clause as well.

Answer 1

The optimal I think could be using nth-last-child.

table.find("tr td:nth-last-child(-n+10)").remove();​

Benefit is that internal browser CSS selector engine will be used (or in case of IE jQuery will help a little 🙂
Here is the demo removing last 3 elements. Change it to 10 in your case.