Why dynamically input field are not removing by clicking remove button

Question

$(document).ready(function () {
 //@naresh action dynamic childs
 var next = 0;
 $("#add-more").click(function (e) {
  e.preventDefault();
  var addto = "#field" + next;
  var addRemove = "#field" + (next);
  next = next + 1;
  var newIn = ' <div id="field' + next + '" name="field' + next + '"><!-- Text input--> <div class="form-group"> <div class="col-6"> <label for="vat" ></label><input type="text" placeholder="Check In Date" id="datepicker-12"   name="PeriodFrom[]"   class=" datepicker_recurring_start" value=""></div><div class="col-6"><label for="street" ></label><input type="text"  name="PeriodTo[]" placeholder="Check Out Date"  class=" datepicker_recurring_start" value=""></div></div><div class="form-group"><div class="col-6"><label for="vat" ></label><input type="text" id="DoubleBad" name="DoubleBad" placeholder="Double Bed"    value=""></div><div class="col-6"><label for="street" ></label><input type="text" placeholder="Above 12 Years"  id="EXTRA_ADL_ABOVE_12_YRS" name="EXTRA_ADL_ABOVE_12_YRS"   value=""></div></div><div class=" form-group"> <label for="postal-code" > </label><label for="postal-code" ></label><input type="text" id="CNB"  name="MaxCNB[]"   value="" required="required" placeholder="Max Rate CNB"> </div> </div>';
  var newInput = $(newIn);
  var removeBtn = '<button id="remove' + (next - 1) + '" class="btn btn-danger remove-me" >Remove</button></div></div><div id="field">';
  var removeButton = $(removeBtn);
  $(addto).after(newInput);
  $(addRemove).after(removeButton);
  $("#field" + next).attr('data-source', $(addto).attr('data-source'));
  $("#count").val(next);

  $('body').on('click','.remove-me',function (e) {
   e.preventDefault();
   var fieldNum = this.id.charAt(this.id.length - 1);
   var fieldID = "#field" + fieldNum;
   $(this).remove();
   $(fieldID).remove();
  });
 });

});

<!DOCTYPE html>
<html>
   <head>
      <title></title>
      <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/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   </head>
   <body>
      <div id="right-panel" class="right-panel">
         <div class="content mt-3" >
            <div class="animated fadeIn">
               <div class="row" style="border:none;">
                  <div class="col-md-12">
                     <div class="card" >
                        <div class="card-header">
                           <div class="row"  >
                              <i class="fa fa-hotel" style="font-size:24px;"></i>
                              <h4 style=" font-family: 'Ubuntu',sans-serif;margin-left:20px;"> Manage Hotels </h4>
                           </div>
                        </div>
                        <div class="card-body">
                           <form method="post" action="<?php echo base_url(); ?>Admin/Insert-Hotels">
                              <div class="card-body card-block">
                                 <div class="form-group">
                                    <div class="col-6" id="content">
                                       <label for="vat" ></label><input type="text" id="datepicker_recurring_start"   name="PeriodFrom[]"   class=" datepicker_recurring_start" placeholder="Check In Date" value="" required="required">
                                    </div>
                                    <div class="col-6" id="content">
                                       <label for="street" ></label><input type="text"  id="datepicker-13" name="PeriodTo[]"  class=" datepicker_recurring_start" placeholder="Check Out Date" value="" required="required">
                                    </div>
                                 </div>
                                 <div class=" form-group">
                                    <div class="col-6">
                                       <label for="vat" ></label><input type="text" id="DoubleBed" name="MaxDoubleBed[]"    value="" placeholder="Max Rate Double Bed" required="required">
                                    </div>
                                    <div class="col-6">
                                       <label for="postal-code" ></label><input type="text" id="SigleBed" name="MaxSigleBad[]"   value="" placeholder="Max Rate Sigle Bed" required="required">
                                    </div>
                                 </div>
                                 <div class=" form-group">
                                    <div class="col-6">
                                       <label for="postal-code" ></label><input type="text" id="CNB"  name="MaxCNB[]"   value="" required="required" placeholder="Max Rate CNB">
                                    </div>
                                    <div class="col-6">
                                       <label for="postal-code" ></label> 
                                       <select name="cityID" id="cityID" class="-md " required="required">
                                          <option value="">Select Country and City</option>
                                          <?php
                                             foreach ($fatch_hotels_country as $key => $fatch_hotels_country) {
                                             
                                                 echo "<option value='".$fatch_hotels_country->id."'>".$fatch_hotels_country->citiesName."</option>";
                                             }
                                             ?>
                                       </select>
                                    </div>
                                 </div>
                                 <div class=" form-group">
                                    <label for="postal-code" ></label>
                                    <label for="company" ></label><input type="text" id="HotelName" name="Star"   value="" required="required" placeholder="Star">
                                 </div>
                              </div>
                              <!-----------------------------------   Add More Data Start -------------------------->
                              <div class=" form-group">
                                 <div id="field">
                                    <div id="field0">
                                    </div>
                                 </div >
                                 <!-----------------------------------   Add More Data End -------------------------->
                              </div>
                        </div>
                        <div class="modal-footer">
                        <input type="reset"  class="btn btn-danger" value="Reset">
                        <input type="submit"  class="btn btn-primary" value="Insert">
                        <button id="add-more" name="add-more" class="btn btn-primary">Add More</button>
                        </div>
                     </div>
                  </div>
                  </form>
               </div>
            </div>
         </div>
      </div>
      </div>
      </div>
      </div>
      </div>
      </div>
   </body>
</html>

Here I'm trying to add input field dynamically by clicking add button. adding field's button working but while trying to remove so it is not working. you can see right below here.

$(document).ready(function () {
 //@naresh action dynamic childs
 var next = 0;
 $("#add-more").click(function (e) {
  e.preventDefault();
  var addto = "#field" + next;
  var addRemove = "#field" + (next);
  next = next + 1;
  var newIn = ' <div id="field' + next + '" name="field' + next + '"><!-- Text input--> <div class="form-group"> <div class="col-6"> <label for="vat" ></label><input type="text" placeholder="Check In Date" id="datepicker-12"   name="PeriodFrom[]"   class=" datepicker_recurring_start" value=""></div><div class="col-6"><label for="street" ></label><input type="text"  name="PeriodTo[]" placeholder="Check Out Date"  class=" datepicker_recurring_start" value=""></div></div><div class=" form-group"><div class="col-6"><label for="city" ></label><input type="text" placeholder="Room Category" id="RoomCategory"  name="RoomCategory[]"  value=""></div><div class="col-6"><label for="postal-code" ></label><input type="text" id="SigleBad" placeholder="Sigle Bed" name="SigleBad"   value=""></div></div><div class="form-group"><div class="col-6"><label for="vat" ></label><input type="text" id="DoubleBad" name="DoubleBad" placeholder="Double Bed"    value=""></div><div class="col-6"><label for="street" ></label><input type="text" placeholder="Above 12 Years"  id="EXTRA_ADL_ABOVE_12_YRS" name="EXTRA_ADL_ABOVE_12_YRS"   value=""></div></div><div class=" form-group"><div class="col-6"><label for="city" ></label><input type="text" placeholder="UPTO 11 Years" id="CWB_UPTO_11_YRS"   name="CWB_UPTO_11_YRS"  value=""></div> <div class="col-6"><label for="postal-code" ></label><input type="text" placeholder="CNB" id="CNB"  name="CNB"   value=""></div></div>   <div class=" form-group"><div class="col-6"><label for="vat" ></label><input type="text" id="DoubleBed" name="MaxDoubleBed[]"    value="" placeholder="Max Rate Double Bed" required="required"></div><div class="col-6"> <label for="postal-code" ></label><input type="text" id="SigleBed" name="MaxSigleBad[]"   value="" placeholder="Max Rate Sigle Bed" required="required"></div></div><div class="form-group"> <div class="col-6"><label for="city" ></label><input type="text" id="CWB_UPTO_11_YRS"   name="MaxCWB_UPTO_11_YRS[]"  value="" placeholder="Max Rate UPTO 11 Years" required="required"></div><div class="col-6"><label for="street" ></label><input type="text"  id="EXTRA_ADL_ABOVE_12_YRS" name="MaxEXTRA_ADL_ABOVE_12_YRS[]"   placeholder="Max Rate Above 12 Years" value="" required="required"></div> </div><div class=" form-group"> <label for="postal-code" > </label><label for="postal-code" ></label><input type="text" id="CNB"  name="MaxCNB[]"   value="" required="required" placeholder="Max Rate CNB"> </div> </div>';
  var newInput = $(newIn);
  var removeBtn = '<button id="remove' + (next - 1) + '" class="btn btn-danger remove-me" >Remove</button></div></div><div id="field">';
  var removeButton = $(removeBtn);
  $(addto).after(newInput);
  $(addRemove).after(removeButton);
  $("#field" + next).attr('data-source', $(addto).attr('data-source'));
  $("#count").val(next);

  $('.remove-me').click(function (e) {
   e.preventDefault();
   var fieldNum = this.id.charAt(this.id.length - 1);
   var fieldID = "#field" + fieldNum;
   $(this).remove();
   $(fieldID).remove();
  });
 });

});

<!DOCTYPE html>
<html>
   <head>
      <title></title>
      <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/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   </head>
   <body>
      <div id="right-panel" class="right-panel">
         <header id="header" class="header">
            <h3 style="margin-left:45%;  font-family: "Ubuntu",sans-serif; font-weight:300;"> Hotels Insert</h3>
            <div class="row" style="float:left; margin-top:10px;">
               <a href="#"> <i class="menu-icon fa fa-user-alt"></i> Admin </a>
            </div>
            <div class="row" style="float:right;margin-top:10px;">
               <a href="#"> Logout</a>
            </div>
         </header>
         <div class="content mt-3" >
            <div class="animated fadeIn">
               <div class="row" style="border:none;">
                  <div class="col-md-12">
                     <div class="card" >
                        <div class="card-header">
                           <div class="row"  >
                              <i class="fa fa-hotel" style="font-size:24px;"></i>
                              <h4 style=" font-family: 'Ubuntu',sans-serif;margin-left:20px;"> Manage Hotels </h4>
                           </div>
                        </div>
                        <div class="card-body">
                           <form method="post" action="<?php echo base_url(); ?>Admin/Insert-Hotels">
                              <div class="card-body card-block">
                                 <div class="form-group">
                                    <input type="text" id="HotelName" name="HotelName"   value="" placeholder="Hotels Name" required="required">
                                 </div>
                                 <div class=" form-group">
                                    <div class="col-6">
                                       <label for="vat" ></label>
                                       <input type="text" id="RoomCategory"  name="VenderName"  placeholder="Vender Name" value="" required="required">
                                    </div>
                                    <div class="col-6">
                                       <label for="vat" ></label>
                                       <input id="SigleBed" name="phone"   type="text" pattern="^([0|\+[0-9]{1,5})?([7-9][0-9]{9})$" value="" placeholder="Mobile Number" minlength="10" maxlength="12" required="required">
                                    </div>
                                 </div>
                                 <div class=" form-group">
                                    <div class="col-6">
                                       <label for="vat" ></label>
                                       <input type="email" id="RoomCategory"  name="Email" placeholder="Email-ID"  value="" required="required">
                                    </div>
                                    <div class="col-6">
                                       <label for="vat" ></label>
                                       <input type="text" id="SigleBed" name="HAddress"  placeholder="Hotel Address"  value="" required="required">
                                    </div>
                                 </div>
                                 <div class=" form-group">
                                    <div class="col-6">
                                       <label for="vat" ></label>
                                       <input type="text" id="RoomCategory"  name="CountryName" placeholder="Country Name"  value="" required="required">
                                    </div>
                                    <div class="col-6">
                                       <label for="vat" ></label>
                                       <input type="text" id="SigleBed" name="CityName" placeholder="City Name"   value="" required="required">
                                    </div>
                                 </div>
                                 <div class=" form-group">
                                    <div class="col-6">
                                       <label for="vat" ></label>
                                       <input type="text" id="RoomCategory"  name="UserID"  placeholder="User Name"  value="" required="required">
                                    </div>
                                    <div class="col-6">
                                       <label for="vat" ></label>
                                       <input type="Password" id="SigleBed" name="Password" placeholder="Password"   value="" required="required">
                                    </div>
                                 </div>
                                 <div >
                                    <label for="vat" ></label>
                                    <label for="vat" ></label>
                                    <label for="vat" ></label>
                                 </div>
                                 <div class="form-group">
                                    <div class="col-6" id="content">
                                       <label for="vat" ></label><input type="text" id="datepicker_recurring_start"   name="PeriodFrom[]"   class=" datepicker_recurring_start" placeholder="Check In Date" value="" required="required">
                                    </div>
                                    <div class="col-6" id="content">
                                       <label for="street" ></label><input type="text"  id="datepicker-13" name="PeriodTo[]"  class=" datepicker_recurring_start" placeholder="Check Out Date" value="" required="required">
                                    </div>
                                 </div>
                                 <div class=" form-group">
                                    <div class="col-6">
                                       <label for="city" ></label><input type="text" id="RoomCategory"  name="RoomCategory[]"  value="" placeholder="Room Category" required="required">
                                    </div>
                                    <div class="col-6">
                                       <label for="postal-code" ></label><input type="text" id="SigleBed" name="SigleBad[]"   value="" placeholder="Sigle Bed" required="required">
                                    </div>
                                 </div>
                                 <div class="form-group">
                                    <div class="col-6">
                                       <label for="vat" ></label><input type="text" id="DoubleBed" name="DoubleBed[]"    value="" placeholder="Double Bed" required="required">
                                    </div>
                                    <div class="col-6">
                                       <label for="street" ></label><input type="text"  id="EXTRA_ADL_ABOVE_12_YRS" name="EXTRA_ADL_ABOVE_12_YRS[]"   placeholder="Above 12 Years" value="" required="required">
                                    </div>
                                 </div>
                                 <div class=" form-group">
                                    <div class="col-6">
                                       <label for="city" ></label><input type="text" id="CWB_UPTO_11_YRS"   name="CWB_UPTO_11_YRS[]"  value="" placeholder="UPTO 11 Years" required="required">
                                    </div>
                                    <div class="col-6">
                                       <label for="postal-code" ></label><input type="text" id="CNB"  name="CNB[]"   value="" required="required" placeholder="CNB">
                                    </div>
                                 </div>
                                 <div class=" form-group">
                                    <div class="col-6">
                                       <label for="vat" ></label><input type="text" id="DoubleBed" name="MaxDoubleBed[]"    value="" placeholder="Max Rate Double Bed" required="required">
                                    </div>
                                    <div class="col-6">
                                       <label for="postal-code" ></label><input type="text" id="SigleBed" name="MaxSigleBad[]"   value="" placeholder="Max Rate Sigle Bed" required="required">
                                    </div>
                                 </div>
                                 <div class="form-group">
                                    <div class="col-6">
                                       <label for="city" ></label><input type="text" id="CWB_UPTO_11_YRS"   name="MaxCWB_UPTO_11_YRS[]"  value="" placeholder="Max Rate UPTO 11 Years" required="required">
                                    </div>
                                    <div class="col-6">
                                       <label for="street" ></label><input type="text"  id="EXTRA_ADL_ABOVE_12_YRS" name="MaxEXTRA_ADL_ABOVE_12_YRS[]"   placeholder="Max Rate Above 12 Years" value="" required="required">
                                    </div>
                                 </div>
                                 <div class=" form-group">
                                    <div class="col-6">
                                       <label for="postal-code" ></label><input type="text" id="CNB"  name="MaxCNB[]"   value="" required="required" placeholder="Max Rate CNB">
                                    </div>
                                    <div class="col-6">
                                       <label for="postal-code" ></label> 
                                       <select name="cityID" id="cityID" class="-md " required="required">
                                          <option value="">Select Country and City</option>
                                          <?php
                                             foreach ($fatch_hotels_country as $key => $fatch_hotels_country) {
                                             
                                                 echo "<option value='".$fatch_hotels_country->id."'>".$fatch_hotels_country->citiesName."</option>";
                                             }
                                             ?>
                                       </select>
                                    </div>
                                 </div>
                                 <div class=" form-group">
                                    <label for="postal-code" ></label>
                                    <label for="company" ></label><input type="text" id="HotelName" name="Star"   value="" required="required" placeholder="Star">
                                 </div>
                              </div>
                              <!-----------------------------------   Add More Data Start -------------------------->
                              <div class=" form-group">
                                 <div id="field">
                                    <div id="field0">
                                    </div>
                                 </div >
                                 <!-----------------------------------   Add More Data End -------------------------->
                              </div>
                        </div>
                        <div class="modal-footer">
                        <input type="reset"  class="btn btn-danger" value="Reset">
                        <input type="submit"  class="btn btn-primary" value="Insert">
                        <button id="add-more" name="add-more" class="btn btn-primary">Add More</button>
                        </div>
                     </div>
                  </div>
                  </form>
               </div>
            </div>
         </div>
      </div>
      </div>
      </div>
      </div>
      </div>
      </div>
   </body>
</html>

Here you can see, add input field button working but while trying to removing by clicking remove button so it is not working.

First of you have a major no no. I've noticed that when you generate your code you get for example multiple elements with the same id `field0` An id should always be unique. — Carsten Løvbo Andersen, Nov 28 '18 at 08:09

Mamun · Answer 1 · 2018-11-28T08:34:52.087

1

For dynamically created element you have to use [event delegation][1] approach using [.on()][2].

Change

$('.remove-me').click(function (e) {

To

$('body').on('click','.remove-me',function (e) {

Please Note: The htmlString you are using again and again contains some id. But in a document, attribute id must be unique. You can use class instead. Though placing that code inside the add-more button click handler function works, it is better to write that code outside.

edited Nov 28 '18 at 08:34

answered Nov 28 '18 at 08:07

Mamun

66,969
9
47
59

while clicking on remove button so those filed should also remove who dynamically added by add button. but here only remove button is dissappearing – md server Nov 28 '18 at 08:48
@mdserver, it is really difficult to work with the large data you have to fix the issue. May be you can update the question with only few sample data.....thanks – Mamun Nov 28 '18 at 08:55
yeah fine mamun – md server Nov 28 '18 at 09:08
@mdserver, you also have variables *newInput* and *removeBtn* inside the large *htmlString* you have created.....I think that is not intentional.... – Mamun Nov 28 '18 at 09:10
i just reduced my some code. have look over there please – md server Nov 28 '18 at 09:26

Alive to die - Anant · Accepted Answer · 2018-11-28T09:33:48.783

Apply event delegation approach along with jquery .closest()

Do:

$('body').on('click','.remove-me',function (e) {
  $(this).closest(".field-container").remove();
});

And put this code outside of:

$("#add-more").click(function (e) { and $(document).ready({...})

Final code needs to be like this:

$(document).ready(function () {
    //@naresh action dynamic childs
    var next = 0;
    $("#add-more").click(function (e) {
        e.preventDefault();
        var addto = "#field" + next;
        var addRemove = "#field" + (next);
        next = next + 1;
        var newIn = ' <div id="field' + next + '" name="field' + next + '"><!-- Text input--> <div class="form-group"> <div class="col-6"> <label for="vat" ></label><input type="text" placeholder="Check In Date" id="datepicker-12"   name="PeriodFrom[]"   class=" datepicker_recurring_start" value=""></div><div class="col-6"><label for="street" ></label><input type="text"  name="PeriodTo[]" placeholder="Check Out Date"  class=" datepicker_recurring_start" value=""></div></div><div class=" form-group"><div class="col-6"><label for="city" ></label><input type="text" placeholder="Room Category" id="RoomCategory"  name="RoomCategory[]"  value=""></div><div class="col-6"><label for="postal-code" ></label><input type="text" id="SigleBad" placeholder="Sigle Bed" name="SigleBad"   value=""></div></div><div class="form-group"><div class="col-6"><label for="vat" ></label><input type="text" id="DoubleBad" name="DoubleBad" placeholder="Double Bed"    value=""></div><div class="col-6"><label for="street" ></label><input type="text" placeholder="Above 12 Years"  id="EXTRA_ADL_ABOVE_12_YRS" name="EXTRA_ADL_ABOVE_12_YRS"   value=""></div></div><div class=" form-group"><div class="col-6"><label for="city" ></label><input type="text" placeholder="UPTO 11 Years" id="CWB_UPTO_11_YRS"   name="CWB_UPTO_11_YRS"  value=""></div> <div class="col-6"><label for="postal-code" ></label><input type="text" placeholder="CNB" id="CNB"  name="CNB"   value=""></div></div>   <div class=" form-group"><div class="col-6"><label for="vat" ></label><input type="text" id="DoubleBed" name="MaxDoubleBed[]"    value="" placeholder="Max Rate Double Bed" required="required"></div><div class="col-6"> <label for="postal-code" ></label><input type="text" id="SigleBed" name="MaxSigleBad[]"   value="" placeholder="Max Rate Sigle Bed" required="required"></div></div><div class="form-group"> <div class="col-6"><label for="city" ></label><input type="text" id="CWB_UPTO_11_YRS"   name="MaxCWB_UPTO_11_YRS[]"  value="" placeholder="Max Rate UPTO 11 Years" required="required"></div><div class="col-6"><label for="street" ></label><input type="text"  id="EXTRA_ADL_ABOVE_12_YRS" name="MaxEXTRA_ADL_ABOVE_12_YRS[]"   placeholder="Max Rate Above 12 Years" value="" required="required"></div> </div><div class=" form-group"> <label for="postal-code" > </label><label for="postal-code" ></label><input type="text" id="CNB"  name="MaxCNB[]"   value="" required="required" placeholder="Max Rate CNB"> </div> </div>';
        var newInput = $(newIn);
        var removeBtn = '<button id="remove' + (next - 1) + '" class="btn btn-danger remove-me" >Remove</button></div></div><div id="field">';
        var removeButton = $(removeBtn);
        $(addto).after(newInput);
        $(addRemove).after(removeButton);
        $("#field" + next).attr('data-source', $(addto).attr('data-source'));
        $("#count").val(next);
    });
});

$('body').on('click','.remove-me',function (e) {
    $(this).closest(".field-container").remove();
});

Note:- id needs to be unique per element. So check and rectify yourself.

score 0 · Answer 3 · answered Nov 28 '18 at 08:25

First do one thing put button class="btn btn-danger remove-me"inside div id="field" name="field" and give a class of this div like field-container

e.g

<div id="field" name="field" class="field-container">
    <button class="btn btn-danger remove-me"></button>
    <div class="form-group">...</div>
    <div class="form-group">...</div>
    ....
    <div class="form-group">...</div>
</div>

Now. in jQuery

$('body').on('click','.remove-me',function (e) {
   $(this).closest(".field-container").remove();
});

Why dynamically input field are not removing by clicking remove button

3 Answers3