Question

我正在尝试动态创建div。我可以增加值并显示多个div，但是当我减小输入值时，div元素的数量仍然增加。你能帮我吗？

参见此处https://jsfiddle.net/alessiow/n9xskt28/199/（已编辑）


    $(function() {
 $(".instancesN").change(function() {
    var value = $(this).val();
    $(".instancesNContainer").empty();
    for (var i = 1; i < value; i++) {
      var block = $("<div>", {
        class: "block"
      });
      $(block).append($("div.instancesNSpecifics").html());
      $(".instancesNContainer").prepend(block);
    }
  });


 $(function() {
  $("input.usersvmaddnewdivsN").on('change', function() {
    var value = $(this).val();
    $(".usersvmaddnewdivsNContainer").empty();
    for (var i = 1; i < value; i++) {
      var block = $("<div>", {
        class: "block"
      });
      $(block).append($("div.usersvmaddnewdivsNSpecifics").html());
      $(".usersvmaddnewdivsNContainer").append(block);
    }

  });
});
});


  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='number' min="1" oninput="validity.valid||(value='1');" value="1" name='instancesN[]' placeholder="Instances #" class="instancesN form-control" />
<div class="instancesNContainer"></div>
<div class='instancesNSpecifics'>
  <input type='number' min="1" oninput="validity.valid||(value='');" name='usersvmaddnewdivsN[]'  placeholder="Add new Users" class="form-control usersvmaddnewdivsN" />
  <div class="usersvmaddnewdivsNContainer"></div>
<div class='usersvmaddnewdivsNSpecifics'>


  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control usernamevmN" name='usernamevmN[]' placeholder="VM-Username" />
      </div></div></div></div>

Answer 1

问题与添加元素的位置和方式有关。

https://jsfiddle.net/chan_omega/mnh1gyjo/

$(function() {

  $("input.usersvmaddnewdivsN").on('change', function() {
    var self = $(this);
    var container = self.closest(".instancesNSpecifics").find(".usersvmaddnewdivsNContainer");
    var value = self.val();
    container.empty();
    for (var i = 1; i < value; i++) {
      var block = $("<div>", {
        class: "block"
      });
      $(block).append($("div.usersvmaddnewdivsNSpecifics").html());
      container.append(block);
    }

  });
});

.usersvmaddnewdivsNContainer:nth-child(1) {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="instancesNContainer"></div>
<div class='instancesNSpecifics'>
  <input type='number' min="1" oninput="validity.valid||(value='');" name='usersvmaddnewdivsN[]' placeholder="Add new Users" class="form-control usersvmaddnewdivsN" />
  <div class="usersvmaddnewdivsNContainer"></div>
  <div class='usersvmaddnewdivsNSpecifics'>


    <div class="form-row">
      <div class="col">
        <input type="text" class="form-control usernamevmN" name='usernamevmN[]' placeholder="VM-Username" />
      </div>
    </div>
  </div>
</div>
<div class="instancesNContainer"></div>
<div class='instancesNSpecifics'>
  <input type='number' min="1" oninput="validity.valid||(value='');" name='usersvmaddnewdivsN[]' placeholder="Add new Users" class="form-control usersvmaddnewdivsN" />
  <div class="usersvmaddnewdivsNContainer"></div>
  <div class='usersvmaddnewdivsNSpecifics'>


    <div class="form-row">
      <div class="col">
        <input type="text" class="form-control usernamevmN" name='usernamevmN[]' placeholder="VM-Username" />
      </div>
    </div>
  </div>
</div>

无法使用jQuery减少div

1 个答案: