0

Estoy aprendiendo a manipular el DOM y creación de eventos. Me surge un problema que quizá no puedo resolver porque o tengo mal estructurado el código de entrada o porque hay métodos que desconozco para solucionarlo.

Tengo un botón "Ingresar" que toma valores de unos input y va creando divs. Lo que quiero lograr es que cada div creado, a su vez tenga un botón para poder borrarlo. El problema recae en que no sé cómo hacer para borrar el div que contiene al botón que toco. Pude lograr que se borren todos, pero no sé como referenciar al div que contiene al botón que toco para que solo ese se borre.

Necesito quizá una forma de poder diferenciar cada div individualmente, pero no se me ocurre como hacerlo.

Paso el código y alguna imagen

if(pagsComprobador && wpmComprobador && mldComprobador){

    let elemento = {
        pags: document.getElementById("pags").value,
        wpm: document.getElementById("wpm").value,
        mld: document.getElementById("mld").value,
        index: elementosIndex
    }

    elemento["tiempoEstimado"] = Math.round((elemento.pags/((elemento.wpm*elemento.mld)/250)));

    elementosArr.push(elemento);

    console.log(elemento.tiempoEstimado)

    librosIngresados.push(document.createElement("div"));

    librosIngresados[(librosIngresados.length)-1].className = "libro-div row";

    librosIngresados[(librosIngresados.length)-1].innerHTML = `
        <div class="col-md-6 d-flex flex-column align-items-center justify-content-center">
            <h3 class="p-info">Páginas: ${elementosArr[elementosArr.length-1].pags}</h3>
            <h3 class="p-info">WPM: ${elementosArr[elementosArr.length-1].wpm}</h3>
            <h3 class="p-info">MLD: ${elementosArr[elementosArr.length-1].mld}</h3>
        </div>

        <div class="col-md-6 d-flex align-items-center justify-content-center">
            <img id="delete-btn" src="./media/cancel.png" alt="">
        </div>
    `;


    //reseteo el input de paginas
    document.getElementById("pags").value = "";

    if((librosIngresados.length%2) === 0){
        librosIngresados[(librosIngresados.length)-1].classList.add("darkened");
    }

    nodoLibrosContainer.appendChild(librosIngresados[(librosIngresados.length)-1]);

los divs que van siendo creados se agregan al array "librosIngresados"

Acá les muestro cómo quedan los divs, y el botón de borrar es al que le quiero dar la funcionalidad

introducir la descripción de la imagen aquí

No puedo lograr que cada botón borre el div correspondiente.

Espero se haya entendido la pregunta, me resulta muy difícil de explicar qué quiero hacer.

1
  • ¿Puedes añadir el código en el que los botones eliminan el div? Es ahí donde se puede lograr. Por cierto, cuando añades cada div con su respectivo botón (<img>), estás añadiendo un id a los botones. Esto es mala práctica, el id de un elemento debe ser único. Commented el 5 oct. 2021 a las 12:36

2 respuestas 2

1

Te comparto un ejemplo de como haría para crear divs y eliminarlos con un botón que este dentro. Por velocidad para visualizar use la libreria bootstrap css. Espero te sea útil, Saludos!

document.getElementById('agregar').onclick = function(e){
  let container = document.getElementById('container');
  
  var newDiv = document.createElement("div");
  
  newDiv.innerHTML = `
    <div id="item" class='row'>
        <div class="col-md-12">
            <div class="alert alert-info">
                <span>Titulo</span>
            <button type="button" onClick="eliminarDiv(this)" 
            class="btn btn-sm btn-danger pull-right">X</button>
          </div>
      </div>
    </div>
  `;
  
  container.appendChild(newDiv);
}

// La función recibe el elemento button y a partir de ahí se busca el div donde esta contenido por un ID para eliminarlo
function eliminarDiv(e){
  e.closest('#item').remove(); // Busca el elemento padre mas cercano con el ID #item 
  
  //e.parentNode.remove(); Si el div es el inmediatamente superior al botón podria ser mas facil con esta linea. 
}
#container {
  min-height: 200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="container"></div>
<div class="row">
  <div class="col-md-12 text-center">
    <button id="agregar" type="button" class="btn btn-primary text-center">Agregar</button>    
  </div>
</div>

0

Debes generar para cada uno de los DIV una ID única (al mismo que le añades las clases libro-div row). Después, en el propio botón de eliminar, puedes añadir un onclick="borrar(32738)" siendo 32738 un ejemplo de ID.

En la función borrar(id) puedes poner el siguiente código:

function borrar(id) {
    let elemento = document.getElementById("" + id);
    elemento.parentNode.removeChild(elemento);
}

Tu Respuesta

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

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