Question

I have this piece of code.
I want to remove the rows created with “Line Add” button with “X” button from each row created.
Any ideas??
Thanks!

<script type="text/javascript">
$(function () {
     $("#AddLine").click(function () {
        var row = "<tr><td><input type=text /></td><td><input type=text /></td><td><input type=text /></td><td><button>X</button></td></tr>";
        $("#table").append(row);
    });
});
</script>

<button id="AddLine">Add Line</button>
    <table border="1px" id="table">
        <tr>
            <td>First Name</td>
            <td>Last Name</td>
            <td>Email</td>
        </tr>
        <tr>
            <td><input type=text /></td>
            <td><input type=text /></td>
            <td><input type=text /></td>
        </tr>
    </table>

Answer 1

If you are using jQuery 1.7+ then you can use the on method:

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

Note that this assumes the only elements of type button you have in your table are used to remove rows. If that’s not the case you’ll want to probably give the “X” buttons a class and use that in the selector.

Here’s a working example of the above.

If you are not using jQuery 1.7+ you can use the delegate method instead:

$("#table").delegate("button", "click", function() {
   $(this).closest("tr").remove(); 
});