Add and Remove Rows Table with Jquery

Question

It's almost done, but I don't know why it doesn't work the way it's supposed to. The functionality is simple, add a row with a click on the last row and delete a row with a button on the left.

Adding works fine, removing too, but when you delete the last row you can't add again. Can you help me guys? This is the code:

 $(document).ready(function() { //Add Button $(".fa-plus").click(function() { var idTable = $(this).closest('table').attr('id'); $('#' + idTable + ' tbody>tr:last').clone(true).insertAfter('#' + idTable + ' tbody>tr:last'); //$('#' + idTable + ' tbody>tr:last #name').val(''); $(this).replaceWith(''); return false; }); //Delete Butotn $(".fa-trash").click(function() { var idTable = $(this).closest('table').attr('id'); var rowCount = $('#' + idTable + ' tr').length; if (rowCount > 2) { // If is the last Row if (!$(this).closest('tr').next().length) { $(this).closest("tr").remove(); $('#' + idTable + ' tbody>tr:last #add').append("<i class='fa fa-plus fa-lg text-primary'></i>"); } else { $(this).closest("tr").remove(); } } else { alert('Dont delete the only row'); } }); });

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="tbl_PilotOption" class="table table-bordered table-striped" style=" width: 100%;"> <thead> <tr> <th style="width:46px;"></th> <th></th> <th style="width: 35%;"></th> <th style="width:46px;"></th> </tr> </thead> <tbody> <tr> <td class="text-center" width="30px"><a id="delete"><i class="fa fa-trash ml-2"></i></a></td> <td><input class="form-control" /></td> <td><input class="form-control" /></td> <td><a href="#" id="add"><i class="fa fa-plus fa-lg text-primary"></i></a></td> </tr> </tbody> </table>

Answer 1

The problem is that when you remove the row, you also remove the click handler. So instead of $(".fa-plus").click(function() {... use $('table').on("click", ".fa-plus", function() {... .

 $(document).ready(function() { //Add Button $('table').on("click", ".fa-plus", function() { var idTable = $(this).closest('table').attr('id'); $('#' + idTable + ' tbody>tr:last').clone(true).insertAfter('#' + idTable + ' tbody>tr:last'); //$('#' + idTable + ' tbody>tr:last #name').val(''); $(this).replaceWith(''); return false; }); //Delete Butotn $(".fa-trash").click(function() { var idTable = $(this).closest('table').attr('id'); var rowCount = $('#' + idTable + ' tr').length; if (rowCount > 2) { // If is the last Row if (!$(this).closest('tr').next().length) { $(this).closest("tr").remove(); $('#' + idTable + ' tbody>tr:last #add').append("<i class='fa fa-plus fa-lg text-primary'></i>"); } else { $(this).closest("tr").remove(); } } else { alert('Dont delete the only row'); } }); });

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="tbl_PilotOption" class="table table-bordered table-striped" style=" width: 100%;"> <thead> <tr> <th style="width:46px;"></th> <th></th> <th style="width: 35%;"></th> <th style="width:46px;"></th> </tr> </thead> <tbody> <tr> <td class="text-center" width="30px"><a id="delete"><i class="fa fa-trash ml-2"></i></a></td> <td><input class="form-control" /></td> <td><input class="form-control" /></td> <td><a href="#" id="add"><i class="fa fa-plus fa-lg text-primary"></i></a></td> </tr> </tbody> </table>