时间戳

首页 > 解决方案 > 无法删除以前的输入

javascript - 无法删除以前的输入

问题描述

我有一个输入，当输入一个数字时，JavaScript 会创建该数量的附加输入。此代码有效，但是当我设置一个新数字时，之前的输入不会被删除。它只是生成更多的输入字段。

我的代码：

    $("#child").change(function () {
    
    if($("#child").val() > 0){
        var num = $(this).val();
        var i =1
    console.log(num)
    for(i ; i<=num ; i++){

        var div=document.createElement("div");
        div.className="form-group col-md-4";

        var lbel = document.createElement("label");
        var text = document.createTextNode("سن فرزند"+ " " + i);
        lbel.appendChild(text);
        lbel.className="text-form"
        div.appendChild(lbel);
        var inp = document.createElement("input");
        inp.name="child"+i;
        inp.className="form-control";

        div.appendChild(inp);
        document.getElementById('chil').appendChild(div);
        }
    }
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-md-4">
        <label class="text-form"> تعداد فرزندان </label>
        <input type="text" class="form-control" placeholder="تعداد فرزندان  "id="child">
    </div>
                
    <div id="chil" class="row py-4">
    
    </div>

标签： javascripthtmljquery

解决方案

这是一个小提琴

$("#child").change(function() {

  if ($("#child").val() > 0) {
    var num = $(this).val();
    var i = 1
    console.log(num)
    $('#chil').empty(); // Just empty your div

    for (i; i <= num; i++) {

      var div = document.createElement("div");
      div.className = "form-group col-md-4";

      var lbel = document.createElement("label");
      var text = document.createTextNode("سن فرزند" + " " + i);
      lbel.appendChild(text);
      lbel.className = "text-form"
      div.appendChild(lbel);
      var inp = document.createElement("input");
      inp.name = "child" + i;
      inp.className = "form-control";

      div.appendChild(inp);

      document.getElementById('chil').appendChild(div);
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-md-4">
  <label class="text-form"> تعداد فرزندان </label>
  <input type="text" class="form-control" placeholder="تعداد فرزندان  " id="child">
</div>

<div id="chil" class="row py-4">

</div>

推荐阅读