вот мой код, при добавлении поля ввода, нажав кнопку добавления, чтобы появилось поле, но после попытки удалить эти поля, удалив кнопку, чтобы она не работала.
$(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>
здесь вы можете видеть, я пытаюсь добавить поля ввода, нажав кнопку «Добавить еще» справа внизу справа.во время отображения полей вы можете увидеть кнопку «удалить» справа вверху динамически добавленных полей ввода.при нажатии на эту кнопку, чтобы эти поля не были удалены.