How to create one javascript/jquery function-handler for many items?

Question

I have the html like below:

<table class="table" id="subscriptions">
  <tbody id="subscriptions-tbody">
    <tr>
      <td>Item 1</td>
      <td><a href="#">delete</a></td>
    </tr>
    <tr>
      <td>Item 2</td>
      <td><a href="#">delete</a></td>
    </tr>
    <tr>
      <td>Item 3</td>
      <td><a href="#">delete</a></td>
    </tr>
  </tbody>
</table>

Items can be added dynamically there.

Now, I should create the function, which will help me to delete the element from the list, if user clicks delete. Looks like I should:

1. assign some unique id for each item in the list (I have such ids) - where should I keep them? part as href ?;
2. once user clicks on the link, I should prevent default action and pass control to my function (it will hide the element from the list and will sent POST request to the server) with item id as parameter.

How to do it?

Answer 1

This is the perfect case for event delegation . Hook the event on the table or tbody , but ask jQuery to trigger it only if it happens on your delete link, like this:

$("#subscriptions-tbody").delegate("a", "click", function(event) {
    var row = $(this).closest('tr');

    // ...delete the row

    return false; // Don't try to follow the link
});

Live Example | Source

Because the event is hooked on the table or tbody , adding and removing rows doesn't matter, because the event is handled at the table or tbody level.

In the above, I'm using delegate because I like how explicit is is. With jQuery 1.7 or higher, you can use the way-too-overloaded- on function instead:

$("#subscriptions-tbody").on("click", "a", function(event) {
    var row = $(this).closest('tr');

    // ...delete the row

    return false; // Don't try to follow the link
});

Live Example | Source

Note that the order of arguments is slightly different.

Answer 2

Try this:

<table class="table" id="subscriptions">
  <tbody id="subscriptions-tbody">
    <tr data-id="1">
      <td>Item 1</td>
      <td><a href="#" class="delete">delete</a></td>
    </tr>
    <tr data-id="2">
      <td>Item 2</td>
      <td><a href="#" class="delete">delete</a></td>
    </tr>
    <tr data-id="3">
      <td>Item 3</td>
      <td><a href="#" class="delete">delete</a></td>
    </tr>
  </tbody>
</table>

You will name a class for your delete anchors, let's say class="delete" , and you will place data-id attribute to the table row in order to unique identify each item and know what id to send to the server.

Now your js might look like this:

$("#subscriptions-tbody").on('click', 'a.delete', function(e){

   var tr = $(e.currentTarget).closest('tr');

   //get the id
   var id = tr.attr("data-id");

   //make ajax request
   $.ajax({
      url: 'script.php',
      data: id,
      success: function(data) {

         //hide the item or remove
         tr.remove(); // tr.hide();

         // ajax callback
     }
   });
});

Answer 3

You should keep the information required for the server side ( like the id ) on the tr with data- attributes , and use .on() to handle the events from the table..

html

<table class="table" id="subscriptions">
  <tbody id="subscriptions-tbody">
    <tr data-id="3">
      <td>Item 1</td>
      <td><a href="#" class="delete">delete</a></td>
    </tr>
    <tr data-id="5">
      <td>Item 2</td>
      <td><a href="#" class="delete">delete</a></td>
    </tr>
    <tr data-id="6">
      <td>Item 3</td>
      <td><a href="#" class="delete">delete</a></td>
    </tr>
  </tbody>
</table>

script

$("#subscriptions").on("click", "a.delete", function(e) {
    e.preventDefault();
    var row = $(this).closest('tr'),
        relatedId = row.data('id');

    $.post(...); // use relatedId here
    row.fadeOut(500, function(){
       row.remove();
    })
});

Answer 4

You can store the ID as a data- attribute on either the control or the row. Delegate the click handler to the table itleslf to account for dynamically added elements that don't exist when code is run using on() method.

HTML:

<!-- class added to element -->
<a href="#" class="delecte-btn" data-id="3">delete</a>

JS

$('#subscriptions').on('click', '.delete-btn',function(evt){  
    evt.preventDefault();
    var id=$(this).data('id'), $row=$(this).closest('tr');
    /* send data to server and remove row on success*/
   $.post('serverUrl.php', { rowID: id, action :'delete'}, function(){
         $row.remove();
   })
})