Menu
$(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.
260
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.
132
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.
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
