Tengo un problema, no sé si les ha pasado anteriormente, tengo esta función que se llama "AgregarProducto" que mediante un append agrega ciertos campos de una base de datos, entre ellos unos SELECT que son llenados mediante AJAX, y me permiten elegir los datos, mi problema es que cuando agrego un producto (ítem o línea adicional), los SELECT anteriores también reciben un append, lo que los hace cada vez más grandes según voy agregando y sus procesos que se ejecutan en el evento change en los nuevos, también me afectan a los anteriores. ¿De qué manera puedo crearlos de forma tal, que sean independientes entre sí y no me suceda ese comportamiento?
/*=============================================
AGREGANDO PRODUCTOS DESDE LA TABLA
=============================================*/
$('.tablaInvFacturas tbody').on( 'click', 'button.btnAgregarProducto', function () {
var idProducto=$(this).attr("idProducto");
//console.log("idProducto",idProducto);
$(this).removeClass("btn-primary btnAgregarProducto");
$(this).addClass("btn-default");
var datos=new FormData();
datos.append("idProducto",idProducto);
$.ajax({
url:"ajax/inventarios.ajax.php",
method:"POST",
data: datos,
cache: false,
contentType: false,
processData: false,
dataType: 'json',
success: function(respuesta){
//console.log("respuesta",respuesta);
var desc_prod =(respuesta["DESC_PROD"]);
var exist =(respuesta["EXIST"]);
var servicio =(respuesta["SERVICIO"]);
//var precio =(respuesta["PRECIO"]);
if(respuesta["SERVICIO"]==1){
$(".nuevoProducto").append(
'<!--Descripción del Producto-->'+
'<div class="row" style="padding: 5px 5px">'+
'<div class="col-xs-5" >'+
'<div class="input-group">'+
'<span class="input-group-addon">'+
'<button type="button" class="btn btn-danger btn-xs btnQuitarProducto" idProducto="'+idProducto+'"><i class="fa fa-times"></i></button>'+
'</span>'+
'<input type="text" class="form-control" id="agregarProducto" name="agregarProducto" value="'+desc_prod+'" readonly required>'+
'</div>'+
'</div>'+
'<!--Cantidad del Producto-->'+
'<div class="col-xs-3">'+
'<input type="number" step="1" class="form-control nuevaCantidadProducto" name="nuevaCantidadProducto" exist="'+exist+'" servicio="'+servicio+'" min="1" required >'+
'</div>'+
'<!--Precio del Producto-->'+
'<div class="col-xs-4 ingresoPrecio">'+
'<div class="input-group">'+
'<span class="input-group-addon"><i class="ion ion-social-usd"></i></span>'+
'<input type="number" step="0.01" class="form-control nuevoPrecioProducto" precioReal="" name="nuevoPrecioProducto" min="1" value="" required>'+
'</div>'+
'</div>'+
'<div class="row" style="padding: 5px 15px">'+
'<!--Nombre del médico practicante-->'+
'<div class="col-xs-3" >'+
'<div class="input-group">'+
'<select class="form-control nuevoMdPracticante" idProducto name="nuevoMdPracticante" id="nuevoMdPracticante" required>'+
'<option>Md. practicante</option>'+
'</select>'+
'</div>'+
'</div>'+
'<!--Nombre del médico referente-->'+
'<div class="col-xs-3">'+
'<div class="input-group">'+
'<select class="form-control nuevoMdReferente" idProducto name="nuevoMdReferente" id="nuevoMdReferente" required>'+
'<option>Md. referente</option>'+
'</select>'+
'</div>'+
'</div>'+
'<!--Nombre del paciente-->'+
'<div class="col-xs-4">'+
'<div class="input-group">'+
'<select class="form-control baseExpediente" idMd name="baseExpediente" required>'+
'<option>Base Expediente</option>'+
'<option value="pacientes">Base Dra. Patricia Lemus</option>'+
'<option value="pacientesfranco">Base Dr. Carlos Franco</option>'+
'<option value="pacientess">Base Dra. Ana Jense Villatoro</option>'+
'</select>' +
'</div>'+
'<div class="input-group">'+
'<select class="form-control nuevoPacienteProcedimiento" idProducto name="nuevoPacienteProcedimiento" required>'+
'<option>Paciente</option>'+
'</select>'+
'</div>'+
'</div>'+
'</div>'+
'</div>'
);
medicosFact();
/*SUMAR TOTAL DE PRECIOS*/
sumarTotalPrecios();
}else{
$(".nuevoProducto").append(
'<!--Descripción del Producto-->'+
'<div class="row" style="padding: 5px 15px">'+
'<div class="col-xs-5" style="padding-right: 0px">'+
'<div class="input-group">'+
'<span class="input-group-addon">'+
'<button type="button" class="btn btn-danger btn-xs btnQuitarProducto" idProducto="'+idProducto+'"><i class="fa fa-times"></i></button>'+
'</span>'+
'<input type="text" class="form-control" id="agregarProducto" name="agregarProducto" value="'+desc_prod+'" readonly required>'+
'</div>'+
'</div>'+
'<!--Cantidad del Producto-->'+
'<div class="col-xs-3">'+
'<input type="number" step="1" class="form-control nuevaCantidadProducto" name="nuevaCantidadProducto" exist="'+exist+'" servicio="'+servicio+'" min="1" required >'+
'</div>'+
'<!--Precio del Producto-->'+
'<div class="col-xs-4 ingresoPrecio">'+
'<div class="input-group">'+
'<span class="input-group-addon"><i class="ion ion-social-usd"></i></span>'+
'<input type="number" step="0.01" class="form-control nuevoPrecioProducto" precioReal="" name="nuevoPrecioProducto" min="1" value="" required>'+
'</div>'+
'</div>'+
'</div>'
);
/*SUMAR TOTAL DE PRECIOS*/
sumarTotalPrecios();
}
}
});
limpiarSelect("#nuevoMdPracticante");
limpiarSelect("#nuevoMdReferente");
});
Mi función limpiarSelect es la siguiente:
function limpiarSelect(id)
{
document.getElementById(id).options.length = 0;
}