How to write function and pass parameters for a jquery function

There are many ways to handle use attribute selector in one way

  $("[id^=table]").on('click','.btnDelete',function(){
        $(this).closest('tr').remove();
  });

Take a different approach and assign a behaviour class, eg:

$(".table-with-removable-rows").on('click','.btnDelete',function(){
    $(this).closest('tr').remove();
});

then whenever you want this behaviour, you add that class, eg:

<table class="table-with-removable-rows">...

that way there's:

• no need to change any code
• it doesn't affect every table, only the ones you set this to
• you don't need to format the id to trigger the behaviour
• the behaviour is clear on the html

It's pretty easy, just name your function and use it wherever you want

$(document).ready(function() {    
  var deleteAction = function() {
     $(this).closest('tr').remove();
  };
  $("#table1").on('click', '.btnDelete', deleteAction);
  $("#table2").on('click', '.btnDelete', deleteAction);
  $(".btnDelete").on('click', deleteAction);
  // etc etc.
});

   $(document).ready(function(){    
      $("#table1").on('click','.btnDelete',function(){
         RemoveRow($(this));
      });

      function RemoveRow(table){
         $(table).closest('tr').remove();
      }

  });

• Using multiple-selector

 $("#table1,#table2,#table3").on('click', '.btnDelete', function() {
   $(this).closest('tr').remove();
 });

• Using Attribute-starts-with selector

$("[id^=table]").on('click', '.btnDelete', function() {
  $(this).closest('tr').remove();
});