$(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>
在这里您可以看到， 添加输入字段按钮可以正常工作，但是在尝试通过单击“删除”按钮进行删除时却无法使用。
答案 0 :(得分：1)
对于动态创建的元素，您必须使用[.on（）] [2]使用[事件委托] [1]方法。
更改
$('.remove-me').click(function (e) {
收件人
$('body').on('click','.remove-me',function (e) {
请注意：您正在反复使用的 htmlString 包含一些 id 。但是在文档中，属性 id 必须是唯一的。您可以改用 class 。尽管可以将代码放置在更多按钮单击处理程序函数中，但最好将代码编写在外部。
答案 1 :(得分：0)
同时应用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每个元素必须唯一。因此，请检查并纠正自己。
答案 2 :(得分：0)
首先做一件事，将按钮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();
});