Estoy realizando un formulario el cual al recibir una petición por medio de Ajax, y depende de la opción que elija el usuario (estas opciones vienen por medio de un select
), almacene sus valores en un div
.
- HTML:
<select class="custom-select" id="lista" name="lista">
<option selected value="0">Seleccionar...</option>
<option value="1">Opcion #1</option>
<option value="2">Opcion #2</option>
</select>
- Javascript:
$("#lista").change(function(){
var lista = $("#lista").val();
var datos = new FormData();
datos.append("lista", lista);
$.ajax({
url: "....",
method:"POST",
data: datos,
cache: false,
contentType: false,
processData: false,
dataType:'JSON',
success: window.respuesta
});
});
- Función respuesta donde se crean los div:
function respuesta(respuesta){
let fila = $(".f-indicadores");
for(let i = 0; i < respuesta.length; ++i)
{
fila.append('<div class="col-12"><p>' + respuesta[i].BANCO + '</p></div>');
}
}
Dichos div
se crean mediante el metodo append
como se ve arriba y se almacenan aqui:
<div class="row f-indicadores">
<div class="col-12" id="content"></div>
</div>
Pero luego al crearse, y solicitar otra petición (es decir, el usuario elige otra opción en el select), vuelve a crear otros div
por encima de los ya creados anteriormente.
Mi duda es, ¿como seria posible eliminar los div
previamente creados?.