Aquí está mi código. Quiero agregar datos basados en los tres cuadros de texto si el valor del cuadro de texto es 2 y el valor de textbox2 es 3 y el valor de textbox3 es 1. El resultado será 2 apple 3banans y 1 cherry y el usuario también puede eliminar elementos con valor de cuadro de texto I he intentado hacer este código pero está eliminando todos los elementos, ¿podría ayudarme a resolver este problema?
$(".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>$(".box > span").length no tiene en cuenta sus diferentes tipos de entrada. Podría ser más fácil borrar todo y volver a crear la salida completa en el cambio. De esa forma las entradas también mantienen el orden de 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>