javascript - 当用户指定数量时动态克隆元素？ - JavaScript + HTML

Question

用户是否可以输入 <input>将他们希望克隆并追加到页面上的元素数量框起来？

问题是，当用户当前指定要克隆的元素数量时，第二次单击时元素数量大于要克隆的元素数量。另外，是否可以隐藏要在 HTML 和 CSS 中克隆的原始元素？请在下面找到随附的代码和 JsFiddle Link .

$("#btn").click(function() {
    var number = document.getElementById("member").value;
    var e = $('.col');
    for (i=0;i<number;i++) {
      e.clone().insertAfter(e);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Specify Amount of Member Cards Required:<input placeholder="e.g. 2" type="text" id="member" name="member" value="">
<button id="btn" onclick="addinputFields()">Go</button>

<div>

</div>
<br>
<div class="col">Member Card</div>

Answer 1

对 HTML 和 Javascript 进行微调。

添加了一个 jsfiddle example下面的代码。

HTML

Specify Amount of Member Cards Required:

<input placeholder="e.g. 2" type="text" id="member" name="member" value="">
<button id="btn">Go</button>

<div id="colTemplate" class="col">Member Card</div>
<div id="container"></div>

CSS

/* hide the template */
#colTemplate { opacity: 0; visibility: hidden; }

Javascript

$('#btn').click(() => {
  let number = document.getElementById('member').value,
      container = $('#container'),
      template = $('#colTemplate'),
      currentNumber = container.children().length;

  if (currentNumber < number) {
    // Add clones
    for (let i = 0; i < number - currentNumber; i++) {
      let clone = template.clone(true);
      clone.attr('id', null);   // Remove the id from the clone
      container.append(clone);
    }
  } else if (number < currentNumber) {
    // Remove extras
    let extras = $('#container .col');
    for (let i = currentNumber - 1; i > number - 1; i--) {
      extras.eq(i).remove();
    }
  }
});