Unable to remove dynamically added row being added using javascript

Question

I created below form to dynamically add rows. The + button is working perfectly fine, however while I try to remove the row from X button (added dynamically) it fails to remove the row and returns "Uncaught TypeError". This engages javascript and jquery.

While you run the snippet, please scroll down to see the results.

 $(document).ready(function(){ var i=1; $('#add').click(function(){ i++; $('#dynamic_field').append('<tr><td><input type="text" name="name[]" placeholder="Category" class="form-control name_list" /></td><td><input type="radio" name="inlineRadioOptions []" value="Yes &emsp;"> Yes &emsp; <label class="radio-inline"><input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="No"> No</label></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>'); }); $(document).on('click', '.btn_remove', function(){ var button_id = $(this).attr("id"); $('#row'+button_id+'').remove(); }); $('#submit').click(function(){ $.ajax({//here you can send date to DB url:"name.php", method:"POST", data:$('#add_name').serialize(), success:function(data) { alert(data); $('#add_name')[0].reset(); } }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <div class="card-body"> <h5 class="card-text"><div style="text-align: left">Deliverables</div></h5> <h6 class="card-subtitle mb-2 text-muted"><div style="text-align: left">Press + to add minors</div></h6> <button id="add" class="btn add-more"type="button">+</button> </div> <div class="container"> <div class="row"> <input type="hidden" name="count" value="1" /> <div class="control-group" id="fields"> <div class="controls" id="profs"> <form id="main_delivery" class="input-append"> <div id="field"> <table class="table table-bordered" id="dynamic_field"> <tr> <td><input type="text" name="name[]" placeholder="Category" class="form-control name_list" /></td> <td><input type="radio" name="inlineRadioOptions []" value="Yes &emsp;"> Yes &emsp; <label class="radio-inline"><input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="No"> No</label></td> </tr></table> </div> </form></div> </div> </div> </div> 

Answer 1

Try following code:

$(document).ready(function(){
         var i=1;
         $('#add').click(function(){
              i++;
              $('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" name="name[]" placeholder="Category" class="form-control name_list" /></td><td><input type="radio" name="inlineRadioOptions []" value="Yes &emsp;"> Yes &emsp; <label class="radio-inline"><input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="No"> No</label></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
         });
         $(document).on('click', '.btn_remove', function(){
              var button_id = $(this).attr("id");
              $('#row'+button_id+'').remove();
         });

         $('#submit').click(function(){
              $.ajax({//here you can send date to DB
                   url:"name.php",
                   method:"POST",
                   data:$('#add_name').serialize(),
                   success:function(data)
                   {
                        alert(data);
                        $('#add_name')[0].reset();
                   }
              });
         });
    });

Answer 2

.on() came to jQuery much later than v1.4.1. Try updating to >= v1.7 or using .delegate() . Either way, you'll still need to bump up your version to at least v1.4.2 as that's the version where .delegate() was introduced.