Javascript jQuery克隆（）问题

这是我的完整html日期和时间表：

<div class="addmore_box_date">
    <div class="row">
        <div class="col-xs-6 col-sm-4 col-md-4">            
               <input type='text' name="add_date[]" class="form-control" id="add_date" placeholder="Select date">
          </div>
          <div class="col-xs-6 col-sm-4 col-md-4">
            <select class="form-control add_time" id="add_time" name="add_time[]">
                <option value="">Select time</option>
                <option value="12:00 Am">12:00 Am</option>
                <option value="1:00 Am">1:00 Am</option>
                <option value="2:00 Am">2:00 Am</option>
                <option value="3:00 Am">3:00 Am</option>
                <option value="4:00 Am">4:00 Am</option>
                <option value="5:00 Am">5:00 Am</option>
                <option value="6:00 Am">6:00 Am</option>
                <option value="7:00 Am">7:00 Am</option>
                <option value="8:00 Am">8:00 Am</option>
                <option value="9:00 Am">9:00 Am</option>
                <option value="10:00 Am">10:00 Am</option>
                <option value="11:00 Am">11:00 Am</option>
                <option value="12:00 Pm">12:00 Pm</option>
                <option value="1:00 Pm">1:00 Pm</option>
                <option value="2:00 Pm">2:00 Pm</option>
                <option value="3:00 Pm">3:00 Pm</option>
                <option value="4:00 Pm">4:00 Pm</option>
                <option value="5:00 Pm">5:00 Pm</option>
                <option value="6:00 Pm">6:00 Pm</option>
                <option value="7:00 Pm">7:00 Pm</option>
                <option value="8:00 Pm">8:00 Pm</option>
                <option value="9:00 Pm">9:00 Pm</option>
                <option value="10:00 Pm">10:00 Pm</option>
                <option value="11:00 Pm">11:00 Pm</option>
            </select>                                  
        </div>                      
    </div>                                      
    <br/>
</div>  
<label for=""><a id="addmoredate">Add more date & time</a></label>

---

我认为你可以通过三个步骤来解决你的问题：

将

class='add_time'

添加到您的

标签中，如下所示：

获取活动的

add_date

elements count by

var count=$（'.add_按钮'）。长度

并在条件中使用

count

变量代替

x

删除

x--来自您的代码

然后您的JQuery代码必须如下所示：

$（文档）.ready（函数（）{
var max_fields=30；//允许的最大输入框数
var wrapper=$（“.addmore\u box\u date”）；//字段包装器
var add_button=$（“#addmoredate”）；//添加按钮ID
$（'#add_date'）。日期时间选择器（{
计时器选择器：错误，
格式：'Y-m-d'，
格式日期：'Y/m/d'，
minDate:'-1970/01/02'，//昨天是最短日期
maxDate:“+2017/12/01”，//tommorow是日历的最长日期
});    
var x=1；//初始文本框计数
变量计数=$（'.add_按钮'）。长度；
$（添加按钮）。单击（函数（e）{//在添加输入按钮上单击
e、 预防默认值（）；
如果（计数<最大字段）{//max输入框允许
x++；//文本框增量
var newRow=$（“关闭”）；
newRow.find（'.new_-select'）.append（$（'select.add_-time'）.clone（）.attr（'class'，'form control add_-time'+x））；
$（包装器）.append（新行）；
$（'#add_date'+x）.datetimepicker（{
计时器选择器：错误，
格式：'Y-m-d'，
格式日期：'Y/m/d'，
minDate:'-1970/01/02'，//昨天是最短日期
maxDate:“+2017/12/01”，//tommorow是日历的最长日期
});      
}
});
$（包装器）。在（“单击”、“.remove\u date\u time”上，函数（e）{//用户单击remove text
e、 preventDefault（）；$（“#日期_时间_关闭”）.remove（）；
})      
});

说明： 当您删除

close按钮上的
add\u date
元素并减少x变量时，已删除元素的datetimepicker对象在内存中，不会被删除

当您添加一个名为最近删除的元素的新元素时，您不能定义另一个同名的datetimepicker对象。
让我检查一下Seyed Morteza。太好了。它工作得很好。问题是递增运算符，对吗？@shibbirahmed，我在答案的末尾写下了描述；）如果你的问题已经解决，请选择答案并投票表决。
$(document).ready(function() {

    var max_fields      = 30; //maximum input boxes allowed
    var wrapper         = $(".addmore_box_date"); //Fields wrapper
    var add_button      = $("#addmoredate"); //Add button ID

    $('#add_date').datetimepicker({     
            timepicker:false,
            format:'Y-m-d',
            formatDate:'Y/m/d',
            minDate:'-1970/01/02', // yesterday is minimum date
            maxDate:'+2017/12/01', // and tommorow is maximum date calendar             
     });    

   var x = 1; //initlal text box count    

   $(add_button).click(function(e) { //on add input button click

       e.preventDefault();
       if(x < max_fields){ //max input box allowed           
           x++; //text box increment

           var newRow = $("<span id='date_time_close'><div class='row'><div class='col-xs-6 col-sm-4 col-md-4'><input type='text' name='add_date[]' class='form-control' id='add_date"+x+"' placeholder='Select date'></div><div class='col-xs-6 col-sm-4 col-md-4'><div class='new_select'></div><a class='remove_date_time pull-right'>&nbsp;Close</a></div></div></span>");  

          newRow.find('.new_select').append($('select.add_time').clone().attr('class', 'form-control add_time'+x));
          $(wrapper).append(newRow);  

          $('#add_date'+x).datetimepicker({     
                    timepicker:false,
                    format:'Y-m-d',
                    formatDate:'Y/m/d',
                    minDate:'-1970/01/02', // yesterday is minimum date
                    maxDate:'+2017/12/01', // and tommorow is maximum date calendar                 
              });      

       }
    });

    $(wrapper).on("click",".remove_date_time", function(e){ //user click on remove text
        e.preventDefault(); $('#date_time_close').remove(); x--;
    })      
});