Create new table row using Jquery and add button with dynamic id to the table cell

Question

I'm trying to dynamically create and delete a table row using jQuery. While the add row part of it is working, delete row isn't, because the onclick event is getting attached to the dynamically created button. How do I fix this?

<table border="1" id="applicanttable">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>

            <th>&nbsp;</th>
        </tr>
    </thead>
    <tbody>
        <tr id="row_0">
            <td><input id="firstName0" name="firstName0" type="text" /></td>
            <td><input id="lastName0" name="lastName0" type="text" value=""/></td>
            <td><input type="button" class="removerow" id="removerow0" name="removerow0" value="Remove"/></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="5" style="text-align: left;"><button type="button" id="addrow">Add Row</button></td>
        </tr>
    </tfoot>
</table>

<script type="text/javascript">

    var rowIndex = 0;

    $("#addrow").on('click', function() {

        rowIndex++;

        var newRow = '<tr><td><input id="firstName' + rowIndex + '" name="firstName' +
            rowIndex + '" type="text" /></td>"' + '<td><input id="lastName' + rowIndex +
            '" name="lastName' + rowIndex + '" type="text" /></td>"' +
            '<td><input type="button" class="removerow" id="removerow' +
            rowIndex + '" name="removerow' + rowIndex + '" value="Remove"/></td>';

        $("#applicanttable > tbody > tr:last").after(newRow);               

    });

    $(".removerow").on('click', function() {
        alert("hello");
    });

</script>

Answer 1

You'll have to create a " delegated " binding by using on() .

$(document).on('click','.removerow',function(){
//do alert here 
});

or You can use non dynamic parent

$("#applicanttable").on('click','.removerow',function(){
//do alert here 
});

or You can make a function

function removeRow(thisObj){
}

and put onclick="removeRow(this)"

Answer 2

Create the elements with jQuery instead of strings, and you can attach the event handler right away, here's an example with the button, the rest of the elements can be created the same way

var row = $('<tr />');

var btn = $('<input />', {
    type     : 'button',
    'class'  : 'removerow',
    id       : 'removerow' + rowIndex,
    name     : 'removerow' + rowIndex,
    value    : 'Remove',
    on       : {
        click : function() {
            $(this).closest('tr').remove();
        }
    }
});

row.append(btn);

$("#applicanttable > tbody > tr:last").after(row);      

Answer 3

Note, Missing closing </tr> at newRow . Try delegating click event to document with selector [class^=removerow] to select elements having class beginning with "removerow" . Also try adjusting #addRow click event to include if condition which checks if #applicanttable > tbody > tr exists in DOM ; if not append newRow to #applicanttable > tbody

 var rowIndex = 0; $("#addrow").on('click', function() { rowIndex++; var newRow = '<tr><td><input id="firstName' + rowIndex + '" name="firstName' + rowIndex + '" type="text" /></td>"' + '<td><input id="lastName' + rowIndex + '" name="lastName' + rowIndex + '" type="text" /></td>"' + '<td><input type="button" class="removerow" id="removerow' + rowIndex + '" name="removerow' + rowIndex + '" value="Remove"/></td></tr>'; if ($("#applicanttable > tbody > tr").is("*")) $("#applicanttable > tbody > tr:last").after(newRow) else $("#applicanttable > tbody").append(newRow) }); $(document).on('click', "[class^=removerow]", function() { $(this).parents("tr").remove(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <table border="1" id="applicanttable"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>&nbsp;</th> </tr> </thead> <tbody> <tr id="row_0"> <td> <input id="firstName0" name="firstName0" type="text" /> </td> <td> <input id="lastName0" name="lastName0" type="text" value="" /> </td> <td> <input type="button" class="removerow" id="removerow0" name="removerow0" value="Remove" /> </td> </tr> </tbody> <tfoot> <tr> <td colspan="5" style="text-align: left;"> <button type="button" id="addrow">Add Row</button> </td> </tr> </tfoot> </table> 

Answer 4

I put the selector .removerow as a second parameter of the on event listener so that it attaches to dynamic elements.

$(document).on('click', '.removerow', function() {
  $(this).parents('tr').remove();
});

You can test the fiddle here