如何根据文本框值追加和删除 div

Question

这是我的代码，如果文本框值为 2，文本框 2 的值为 3，文本框 3 的值为 1，我想根据所有三个文本框附加数据，结果将是 2 个苹果 3 个香蕉和 1 个樱桃，用户也可以删除具有文本框值的项目我试图制作这段代码，但它正在删除所有项目，你能帮我解决这个问题吗

$(".change_qty").change(function(){
    var total = $(this).val();
    var oldLength = $(".box > span").length;
    var change = total - oldLength;
  var data_text= $(this).data("text");

    if (change > 0) {
        for (i = 0; i < change; i++) {
            $(".box").append(`<span >${data_text}<br /></span>`);
        }
    }
    else {
        change = Math.abs(change)
        $( ".box > span" ).each(function( index ) {             
            $(this).remove();
            if (index == (change -1)) {
                return false;
            }
        });
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input class="form-control input-sm change_qty"  type="number" data-text="apple">
<input class="form-control input-sm change_qty"  type="number" data-text="bananas">
<input class="form-control input-sm change_qty"  type="number" data-text="cherry">

 <div class="box" ></div>

Answer 1

$(".box > span").length不考虑你不同的输入类型。清除所有内容并在更改时重新创建整个输出可能更容易。这样条目也保持 input.

的顺序

$(".change_qty").change(function(){
  //REM: Remove all entries
  $(".box").empty();

  //REM: Recreate all entries
  $(".change_qty").each(function(){
    let tThis = $(this);
    let tText = tThis.data('text');
    let tQuantity = Math.abs(tThis.val());
    
    //REM: Append quantity of entries to .box
    for(let i=0, j=tQuantity; i<j; i++){
      $(".box").append(`<span >${tText}<br /></span>`)
    }
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control input-sm change_qty"  type="number" data-text="apple">
<input class="form-control input-sm change_qty"  type="number" data-text="bananas">
<input class="form-control input-sm change_qty"  type="number" data-text="cherry">

<div class="box" ></div>

如何根据文本框值追加和删除 div

how to append and remove div based on textbox value

html

javascript

jquery

loops

append