Tienes varias cosas raras en tu código, pero primero lo que has pedido.
Para conseguir lo que preguntas simplemente agrega esta línea en la función actual del focusout antes de entrar en el bucle for
:
$('#dynamic_field').empty();
De tal forma que quedaria así:
$('#cantidad').focusout(function() {
var x = $(this).val();
var a = 0;
var o = 1;
// console.log(x);
a++;
o++;
$('#dynamic_field').empty();
for ($i = 1; $i < x; $i++) {
$('#dynamic_field').append('<tr id="row' + o + '"><td><input type="text" name="numeroSerie[]" id="numeroSerie' + a + '" placeholder="Ingrese número de serie" class="form-control name_list"/></td></tr>');
}
});
No te hace falta controlar el onchange
de este modo.
Pero eso te va a causar un problema inesperado, y es que al empezar el bucle con i=1 te va a faltar un elemento cada vez que lo ejecutes.
Por lo tanto, vamos a cambiar varias cosas, como decia al principio, y vamos a acabar dejando el código así:
$('#cantidad').focusout(function() {
var x = $(this).val();
var a = 0;
var o = 1;
// console.log(x);
$('#dynamic_field').empty();
for (i = 0; i < x; i++) {
a++;
o++;
$('#dynamic_field').append('<tr id="row' + o + '"><td><input type="text" name="numeroSerie[]" id="numeroSerie' + a + '" placeholder="Ingrese número de serie" class="form-control name_list"/></td></tr>');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-xs-12 col-sm-9 col-md-6">
<div class="form-group" id="addMore">
<strong>Cantidad:</strong>
<input class="form-control" type="text" name="cantidad[]" id="cantidad">
</div>
</div>
<div class="container" id="content">
<br />
<div class="form-group">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<th>Número de serie</th>
</thead>
<tbody id="dynamic_field">
<tr>
<td><input type="text" name="numeroSerie[]" id="numeroSerie" placeholder="Ingrese número de serie" class="form-control name_list" /></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Explicación de los cambios:
- Se han movido estas líneas:
a++
o++
dentro de bucle for
porque no tenian sentido fuera de el, y porque así los id de las filas y de los inputs seran distintos (antes eran todos iguales)
- Como decia, se ha agregado esta linea:
$('#dynamic_field').empty();
para que cada vez que el foco salga del input se recalcule todo de nuevo dejando vacio el elemento con el identificador #dynamic_field
- Se han cambiado las variables del
for
. Antes eran$i
(típicas de PHP) y ahora son soloi
que son las correctas en javascript, aunque despues no se usen durante las iteraciones. Por lo tanto ahora queda asi:
for (i = 0; i < x; i++) {
Luego he realizado cambios en el HTML. A saber: