为什么动态添加的字段不能通过单击“删除”按钮删除？
[英]why dynamically added fields not removing by clicking remove button?
问题描述
here is my code, while adding input field by clicking add button so field will appear but after trying to remove those fields by removing button so it is not working. 
这是我的代码，在通过单击添加按钮添加输入字段的同时，该字段将出现，但是在尝试通过删除按钮删除这些字段之后，它不起作用。
$(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 you can see, I'm trying to add input fields by clicking "add more" button right below right side. 在这里您可以看到，我正在尝试通过单击右下方的“添加更多”按钮来添加输入字段。 while fields are displaying you can see "remove" button right top of dynamically added input fields. 在显示字段时，您可以在动态添加的输入字段的右上方看到“删除”按钮。 while clicking on that button so those fields are not remove. 在点击该按钮时，不会删除这些字段。
3 个解决方案
解决方案1
2 已采纳 2018-11-28 10:03:22
It seems the div id to be removed is getting wrong so 似乎要删除的div ID错误，因此
Change 更改
var fieldNum = this.id.charAt(this.id.length - 1);
var fieldID = "#field" + fieldNum;
to 至
var fieldNum = +this.id.charAt(this.id.length - 1);
var fieldID = "#field" + parseFloat(fieldNum + 1);
and Add 并添加
next = fieldNum;
in $('body').on('click', '.remove-me', function(e) { 在$('body').on('click', '.remove-me', function(e) {
解决方案2
1 2018-11-28 09:59:18
Try 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="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);
});
$(document).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();
});
});
解决方案3
1 2018-11-28 10:15:23
<html><head> <style> </style> <script src="/scripts/snippet-javascript-console.min.js?v=1"></script><style type="text/css">.as-console-wrapper { position: fixed; bottom: 0; left: 0; right: 0; max-height: 150px; overflow-y: scroll; overflow-x: hidden; border-top: 1px solid #000; display: none; } .as-console { background: #e9e9e9; border: 1px solid #ccc; display: table; width: 100%; border-collapse: collapse; } .as-console-row { display: table-row; font-family: monospace; font-size: 13px; } .as-console-row:after { display: table-cell; padding: 3px 6px; color: rgba(0,0,0,.35); border: 1px solid #ccc; content: attr(data-date); vertical-align: top; } .as-console-row + .as-console-row > * { border: 1px solid #ccc; } .as-console-row-code { width: 100%; white-space: pre-wrap; padding: 3px 5px; display: table-cell; font-family: monospace; font-size: 13px; vertical-align: middle; } .as-console-error:before { content: 'Error: '; color: #f00; } .as-console-assert:before { content: 'Assertion failed: '; color: #f00; } .as-console-info:before { content: 'Info: '; color: #00f; } .as-console-warning:before { content: 'Warning: '; color: #e90 } @-webkit-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } } @-moz-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } } @-ms-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } } @keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } } .as-console-row-code, .as-console-row:after { -webkit-animation: flash 1s; -moz-animation: flash 1s; -ms-animation: flash 1s; animation: flash 1s; }</style> </head> <body> <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> <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> </form></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> </div> </div> </div> </div> <script type="text/javascript"> $(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 class="field"></div>'; 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 = parseInt(this.id.charAt(this.id.length - 1))+1; var fieldID = "#field" + fieldNum; $(this).remove(); $(fieldID).remove(); }); }); }); </script> <div class="as-console-wrapper"><div class="as-console"></div></div></body></html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
动态添加/删除字段-删除按钮不删除字段 - Dynamically Add / Remove Fields - Remove Button not removing Fields
动态添加新字段后创建“删除字段”按钮？ - create a “remove fields” button after new fields are dynamically added?
删除动态添加的表单字段 - Removing dynamically added form fields
删除动态添加的字段时出错 - Error on removing fields added dynamically
使用JavaScript删除动态添加的字段 - Remove Dynamically Added Fields with Javascript
单击新按钮后删除添加的课程 - Remove class added after clicking new button
通过按钮删除动态添加的li - Remove dynamically added li via button
如何在 React 中单击动态添加的按钮时触发 function？ - How to fire a function on clicking by a dynamically added button in React?
单击按钮时删除动态且先前添加的事件侦听器 - Removing an dynamically and previously added event listener on button click
单击按钮动态添加字段会清除现有字段 - Clicking button to Dynamically add a field clears the already existing fields
相关标签