Dropdown delete divs

Question

İ have a dropdown menu with select options and datepicker input fields.

<select class="form-control" name="child" id="children" required>
   <option value="1" selected>Çocuk</option>
   <option value="2">1</option>
   <option value="3">2</option>
   <option value="4">3</option>
 </select>

when the selection is changed every time, I would like to show a number of datepicker fields, corresponding to the selected option.

    $("#children").change(function () {
  $("#childrenlist > :input").remove();
  var numInputs = $(this).val();
  for (var i = 1; i < numInputs; i++)
    $("#childrenlist").append('<div class="col-2"><div class="input-group date" id="bornpicker' + i + '" data-target-input="nearest"><div class="input-group-prepend" data-target="#bornpicker' + i + '" data-toggle="datetimepicker"><i class="input-group-text fa fa-birthday-cake form-icons"></i></div><input type="text" class="form-control datetimepicker-input" data-target="#bornpicker' + i + '" data-toggle="datetimepicker" name="childborn' + i + '" placeholder="Doğum Tarihi"  required></div></div>');
    $('#bornpicker1').datetimepicker({ locale: 'tr', maxDate: 'now', format: 'DD.MM.YYYY', viewMode: 'years' });
    $('#bornpicker2').datetimepicker({ locale: 'tr', maxDate: 'now', format: 'DD.MM.YYYY', viewMode: 'years' });
    $('#bornpicker3').datetimepicker({ locale: 'tr', maxDate: 'now', format: 'DD.MM.YYYY', viewMode: 'years' });
});

my problem with this

$("#childrenlist > :input").remove();

Answer 1

• 使用功能.empty()清空元素#childrenlist。

请查看此代码段。

$("#children").change(function() {
  $("#childrenlist").empty();
  var numInputs = $(this).val();
  for (var i = 1; i < numInputs; i++)
    $("#childrenlist").append('<div class="col-2"><div class="input-group date" id="bornpicker' + i + '" data-target-input="nearest"><div class="input-group-prepend" data-target="#bornpicker' + i + '" data-toggle="datetimepicker"><i class="input-group-text fa fa-birthday-cake form-icons"></i></div><input type="text" class="form-control datetimepicker-input" data-target="#bornpicker' + i + '" data-toggle="datetimepicker" name="childborn' + i + '" placeholder="Doğum Tarihi"  required></div></div>');
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" name="child" id="children" required>
   <option value="1" selected>Çocuk</option>
   <option value="2">1</option>
   <option value="3">2</option>
   <option value="4">3</option>
 </select>
 
 <div id='childrenlist'> </div>

看到？现在正在添加input元素的数量。

注意：我已删除了用于测试目的的添加datetimepicker元素的代码段。