时间戳

首页 > 解决方案 > 为什么动态添加的字段不通过单击删除按钮删除？

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

在这里您可以看到，我正在尝试通过单击右侧下方的“添加更多”按钮来添加输入字段。在显示字段时，您可以在动态添加的输入字段的右上方看到“删除”按钮。单击该按钮时，不会删除这些字段。

标签： javascriptphpjquerycodeignitertwitter-bootstrap-3

解决方案

似乎要删除的 div id 出错了，所以

改变

var fieldNum = this.id.charAt(this.id.length - 1);
var fieldID = "#field" + fieldNum;

至

 var fieldNum = +this.id.charAt(this.id.length - 1);
 var fieldID = "#field" + parseFloat(fieldNum + 1);

并添加

next = fieldNum;

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

在这里演示

推荐阅读