Question

I have a table wherein I add rows using javascript when a button is clicked. Here’s my code:

$("#addToDisplay").click(function (event) {
    $("#tblProducts").removeClass("hide");
    var counter = 1;
    event.preventDefault();
    counter++;
    var newRow = "<tr><td>" + $("#txtProducts").val() + "</td><td>" + ("#txtQty").val()  "</td><td><input type='button' value='Remove' id='btnRemove' /></td></tr>";
    $("#tblProducts").append(newRow);
});

My problem is since I add the remove button per row, hence including it inside the variable newRow, how do I add an onClick event for it so that if I clicked the remove button the corresponding rows would be removed?

Answer 1

first place a common class on your dynamic button

like <input type='button' value='Remove' class='remove' /> and give a unique id to your input button if you want id there. you can make unique id by using counter variable, which you are using in your code.

$("#addToDisplay").click(function (event) {
    $("#tblProducts").removeClass("hide");
    var counter = 1;
    event.preventDefault();
    counter++;
    var newRow = "<tr><td>" + $("#txtProducts").val() + "</td><td>" + $("#txtQty").val() + "</td><td><input type='button' value='Remove' id='btnRemove"+counter+"' class='remove' /></td></tr>";
    $("#tblProducts").append(newRow);
});

and add the following code, it will remove the parent row of remove button.

 $("#tblProducts").on('click', '.remove', function(){
       $(this).closest('tr').remove();
 })

Or If you are generating your dynamic ids, you can change it to work with id like

$("#tblProducts").on('click', '[id^=btnRemove]', function(){
     $(this).closest('tr').remove(); 
});