CODEWITHSUNDEEP
javascriptjqueryhtml
tomantford
tomantford

Reputation: 182

Deleting rows from multiple tables with jQuery

I have a row of nested table, each with an individual ID and multiple rows. In the first table (blank0) I have the action deleteLink

$(document).ready(function(){     
   $("#blank0 .deleteLink").on("click",function() {
       var tr = $(this).closest('tr');
       tr.fadeOut(400, function(){
           tr.remove();
       });
       return false;
   }); 
});

This deletes the selected row as expected. What I want it to do is to delete the same row across all my tables. For example if I click the 3rd delete button, I would want it to delete the 3rd row on blank0 through to blank9

Upvotes: 3

Views: 1085

Answers (1)

Bill Criswell
Bill Criswell

Reputation: 32921

I'd give all the tables a common class and use the rowIndex property to filter out the <tr>s.

$('.blank').on('click', '.deleteLink', function () {
  var rowIndex = $(this).closest('tr').prop('rowIndex');
  $('.blank tr').filter(function () {
    return this.rowIndex === rowIndex;
  }).remove();
});

Here is a demo: http://jsbin.com/yugurekiri/1/edit?html,js,output

Upvotes: 4

Related Questions