jquery cloned button action not working

Question

i have a table with add/remove buttons, those buttons add and remove rows from the table, the buttons are also added with each new row

here what i have as html

<table>
<tr>
   <th>catalogue</th>
   <th>date</th>
   <th>add</th>
   <th>remove</th>
</tr>
<- target row ->
<tr id="cat_row">
   <td>something</td>
   <td>something</td>
   <td><input id="Add" type="button" value="Add" /></td>
   <td><input id="Remove" type="button" value="Remove" /></td>
</tr>
</- target row ->
</table>

JavaScript:

$("#Add").click(function() {
         $('#cat_row').after('<- target row with ->'); // this is only a notation to prevent repeatation
         id++;
});

$("#Remove").click(function() {
         $('#cat_'+id+'_row').remove();
         id--;
});

Please note that after each addation of a new row the id is also changed for example here after clicking the button "Add" 1 time

<table>
<tr>
   <th>catalogue</th>
   <th>date</th>
   <th>add</th>
   <th>remove</th>
</tr>
<tr id="cat_row">
   <td>something</td>
   <td>something</td>
   <td><input id="Add" type="button" value="Add" /></td>
   <td><input id="Remove" type="button" value="Remove" /></td>
</tr>
<tr id="cat_1_row">
   <td>something</td>
   <td>something</td>
   <td><input id="Add" type="button" value="Add" /></td>
   <td><input id="Remove" type="button" value="Remove" /></td>
</tr>
</table>

now the new added Buttons has no actions i must always click on the original buttons - add/remove

after this i want to make the Remove Button removes ONLY the row where it is clicked on for example if i click the button in row 2, row 2 will be deleted

---

Info: I use web2py 2.2.1 with python 2.7 with the last version of jQuery

Answer 1

You can't have two buttons with the same id (you're using duplicates for both "Add" and "Remove"). id values must be unique on the page .

You might look at using a class instead, and also look at event delegation. For instance, assuming this is the only table on your page (if not, just make the selector more specific), if you change your buttons to have classes "add-btn" and "remove-btn" instead of id values, then you can use delegate :

$("table").delegate(".add-btn", "click", function() {
    // An add button was pressed, you can find out which
    // row like this:
    var row = $(this).closest('tr');
});

...and similarly for the .remove-btn button.

Alternately, some prefer to use on (note the order of arguments is slightly different):

$("table").on("click", ".add-btn", function() {
    // An add button was pressed, you can find out which
    // row like this:
    var row = $(this).closest('tr');
});

Which you use is currently a matter of style. I prefer delegate for clarity, but the jQuery team love to hyper-overload their functions. So far they haven't deprecated delegate , though they do call it "superceded."

Answer 2

I think it would be better instead of:

$('#cat_'+id+_row').remove();

Do this in your onclick event:

$(this).parent().parent().remove();