Question

This simple script, to add / delete tablerows using jQuery works well with version 1.3.2. however, on the same pages I am also using scripts that need jQuery > 1.6. This script doesn’t work with that anymore, because if i click add the second time, it removes a row instead of adding it.

A working example can be found here: http://jsbin.com/arete3/edit#source

$(function(){
        $("input[type='button'].AddRow").toggle(
            function(){
                $(this).closest('tr').clone(true).prependTo($(this).closest('table'));
                $(this).attr("value", "Delete row");
            },
            function(){ 
               $(this).closest('tr').remove();          
        });
    });

To see what I mean, change the jQuery version into anything higher that 1.6

Does anyone have a suggestion?

Answer 1

Here is a script that does what your looking for.
I dont know why you are using .toggle because one time its adding and the next its deleting. Which is pointless.

Check out this JSBin

I think this is what your looking for.

$(function(){
// Add row on click (on click of the add button)
$("input[type='button'].AddRow").click(function(){
    // Add the row
    $(this).closest('tr').clone(true).prependTo($(this).closest('table'));
});

// Delete row on click (on click of the delete button)
$("input[type='button'].DelRow").click(function(){
    // Delete the row
    $(this).closest('tr').remove();
});
}); // End DOM