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>

在这里，我尝试通过单击添加按钮动态添加输入字段。添加字段的按钮正常工作，但尝试将其删除则无法正常工作。您可以在这里下面看到。

$(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>

在这里您可以看到，添加输入字段按钮可以正常工作，但是在尝试通过单击“删除”按钮进行删除时却无法使用。

Answer 1

对于动态创建的元素，您必须使用[.on（）] [2]使用[事件委托] [1]方法。

更改

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

收件人

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

请注意：您正在反复使用的 htmlString 包含一些 id 。但是在文档中，属性 id 必须是唯一的。您可以改用 class 。尽管可以将代码放置在更多按钮单击处理程序函数中，但最好将代码编写在外部。

Answer 2

同时应用event delegation approach和jquery .closest()

要做：

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

并将此代码放在：

之外

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

最终代码必须是这样的：

$(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();
});

注意：-id每个元素必须唯一。因此，请检查并纠正自己。

Answer 3

首先做一件事，将按钮class =“ btn btn-danger remove-me”放在div id =“ field” name =“ field”里面，并给这个div的类，例如field-container

例如

<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>

现在。在jQuery中

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

为什么不通过单击删除按钮来删除动态输入字段

3 个答案: