Remove Button to configure in Table (editable) cloned rows

Question

I have an editable table with rows cloned , the rows cloned are editable in both column with a text area and input number . If you click to edit the input number, there is a function which makes the sum and gives the Total Amount automatically.

My issue now is that i can not configure properly the remove button for the rows cloned. If you give a try you notice that instead of removing a row, it adds one more. Please i need help on how to figure it out this issue.

This is the script for rows cloned, i think it needs to get reduced and improved

$('input:button').live('click',function(){
    var temprow = $('#temprow tbody').html();
    var tr = $(this).closest('tr');
    tr.after(temprow);
});

$("input.tr_clone_add").live('click', function() {
    var lastid = $('[id^="sum"]').length + 1;
    var $tr = $(this).closest('.tr_clone');
    var $clone = $tr.clone();
    $clone.find(':text').val('');
    $clone.attr('id', 'sum' + lastid)
    $tr.after($clone);
    initEditables();
    tally('p#subtotal');
    tally('p#total');
});

$(".tr_clone_remove").live("click", function() {
$(".tr_clone").last().remove();
    initEditables();
    tally('p#subtotal');
    tally('p#total');
});

initEditables();
tally('p#subtotal');
tally('p#total'); 

My Table

Answer 1

1. Change the tr.after function to:

    if ($(this).val() == '+') { tr.after(temprow); } 

2. Make the remove() call as:

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

Here is the fiddle .

Answer 2

Edited your Fiddle with the correct solution: http://jsfiddle.net/Manna/S3kZw/5/

• Since the tr_clone_remove class is also a button type input, the first handler is called every time you click on the remove button.

   $('input:button').live('click',function(){ var temprow = $('#temprow tbody').html(); var tr = $(this).closest('tr'); tr.after(temprow); }); 

  This is the reason why rows are being inserted, instead of being deleted.

• Also, updated your remove row block with the correct code.