Add, remove row from table using jquery

Question

According to my code I have 2 tables. On click of 'add' the whole row will append to the next table and on click of 'delete' it will append to the first table.

The code which I wrote works fine but I have a weird error on adding all rows or deleting all rows multiple times, as it will stop working. I am not able to figure out the issue.

 $(".addRow").on("click", function() { var $delete = '<h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4>'; var $clone = $(this).parent().parent(); $clone.find(".addRow").remove(); $clone.find("td:eq(0)").append($delete); $(".selected table").append($clone); $(".deleteRow").on("click", function() { var $add = '<h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4>'; var newClone = $(this).parent().parent(); newClone.find(".deleteRow").remove(); newClone.find("td:eq(0)").append($add); $(".available table").append(newClone); }); }); $(".deleteRow").on("click", function() { var $add = '<h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4>'; var newClone = $(this).parent().parent(); newClone.find(".deleteRow").remove(); newClone.find("td:eq(0)").append($add); $(".available table").append(newClone); $(".addRow").on("click", function() { var $delete = '<h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4>'; var $clone = $(this).parent().parent(); $clone.find(".addRow").remove(); $clone.find("td:eq(0)").append($delete); $(".selected table").append($clone); }); }); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="col-lg-4 col-md-4 col-lg-offset-2 col-md-offset-2 available"> <label>Available Members</label> <table class="table table-bordered"> <tbody> <tr> <td> <h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4> </td> <td> <h6>Cab Swift Two</h6> </td> </tr> <tr> <td> <h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4> </td> <td> <h6>Dharma</h6> </td> </tr> <tr> <td> <h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4> </td> <td> <h6>Sahoo</h6> </td> </tr> <tr> <td> <h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4> </td> <td> <h6>Majhi</h6> </td> </tr> </tbody> </table> </div> <div class="col-lg-4 col-md-4 selected"> <label>Selected Members</label> <table class="table table-bordered"> <tbody> <tr> <td> <h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4> </td> <td> <h6>Shantanu</h6> </td> </tr> <tr> <td> <h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4> </td> <td> <h6>Android</h6> </td> </tr> <tr> <td> <h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4> </td> <td> <h6>ios</h6> </td> </tr> <tr> <td> <h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4> </td> <td> <h6>Windows</h6> </td> </tr> </tbody> </table> </div> </div> 

Here is the working fiddle

Answer 1

bind event to document and not to table row, as after removing element, bound event is also deleted.

$(document).on('click','.addRow'

refer updated fiddle

Answer 2

The issue is because you're dynamically amending the elements, so you need to use delegated event handlers to bind their events:

$('.row').on('click', '.addRow', fn);
$('.row').on('click', '.deleteRow', fn);

Try this:

 $(".row").on("click", '.addRow', function() { var $delete = '<h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4>'; var $clone = $(this).parent().parent(); $clone.find(".addRow").remove(); $clone.find("td:eq(0)").append($delete); $(".selected table").append($clone); $(".deleteRow").on("click", function() { var $add = '<h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4>'; var newClone = $(this).parent().parent(); newClone.find(".deleteRow").remove(); newClone.find("td:eq(0)").append($add); $(".available table").append(newClone); }); }); $(".row").on("click", '.deleteRow', function() { var $add = '<h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4>'; var newClone = $(this).parent().parent(); newClone.find(".deleteRow").remove(); newClone.find("td:eq(0)").append($add); $(".available table").append(newClone); $(".addRow").on("click", function() { var $delete = '<h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4>'; var $clone = $(this).parent().parent(); $clone.find(".addRow").remove(); $clone.find("td:eq(0)").append($delete); $(".selected table").append($clone); }); }); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="col-lg-4 col-md-4 col-lg-offset-2 col-md-offset-2 available"> <label>Available Members</label> <table class="table table-bordered"> <tbody> <tr> <td> <h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4> </td> <td> <h6>Cab Swift Two</h6> </td> </tr> <tr> <td> <h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4> </td> <td> <h6>Dharma</h6> </td> </tr> <tr> <td> <h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4> </td> <td> <h6>Sahoo</h6> </td> </tr> <tr> <td> <h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4> </td> <td> <h6>Majhi</h6> </td> </tr> </tbody> </table> </div> <div class="col-lg-4 col-md-4 selected"> <label>Selected Members</label> <table class="table table-bordered"> <tbody> <tr> <td> <h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4> </td> <td> <h6>Shantanu</h6> </td> </tr> <tr> <td> <h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4> </td> <td> <h6>Android</h6> </td> </tr> <tr> <td> <h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4> </td> <td> <h6>ios</h6> </td> </tr> <tr> <td> <h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4> </td> <td> <h6>Windows</h6> </td> </tr> </tbody> </table> </div> </div>