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

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();
    })
});