4

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?.

1
  • Puedes revisar mi respuesta que te acabo de dejar más abajo. Si es de tu utilidad la puedes marcar para que pueda ayudar a otros a futuro que presenten el mismo problema o requieran hacer algo similar. Saludos !.
    – vicasas
    el 5 sep. 2019 a las 16:02

3 respuestas 3

4

puedes hacerlo asi:

function respuesta(respuesta){
    let fila = $(".f-indicadores"); //selecciona la fila
    fila.text(" "); // el metodo text() eliminas los divs interno

    for(let i = 0; i < respuesta.length; ++i){
        fila.append('<div class="col-12"><p>' + respuesta[i].BANCO + '</p></div>');
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row f-indicadores">
   <div class="col-12" id="content">holas</div>
</div>

3

Necesitas cambiar append() por html() asi:

function respuesta(respuesta){
let fila = $(".f-indicadores");
let divs = "";

for(let i = 0; i < respuesta.length; ++i)
{
    divs += '<div class="col-12"><p>' + respuesta[i].BANCO + '</p></div>';
}
fila.html(divs);
}
2
  • Al aplicar .html, como esta dentro de un ciclo, solo añade el ultimo elemento, a cambio con el .append añade todo los elementos
    – Hugo
    el 5 sep. 2019 a las 15:02
  • Tienes razon, ya edite mi respuesta.
    – alanfcm
    el 5 sep. 2019 a las 15:03
1

Para poder eliminar o remover un elemento HTML podrías usar el método de removeChild() el cual elimina un nodo hijo del DOM y puede devolver el nodo.

Te dejo un ejemplo básico de su funcionamiento, podrías adecuarlo a tus necesidades y si necesitas saber más acerca de este método un buen sitio es la documentación de MDN que puedes revisar.

function handleRemoveElement () {
  var top = document.getElementById("top");
  var nested = document.getElementById("nested");
  var garbage = top.removeChild(nested);
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="top" align="center"> 
    PADRE
    <div id="nested">HIJO (me van a eliminar)</div>
  </div>
  <button onclick="handleRemoveElement()">Remove Element</button>
</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.