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
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.
<img>
), estás añadiendo unid
a los botones. Esto es mala práctica, elid
de un elemento debe ser único.