let add = document.querySelector(".add") add.onclick = function () { let input = document.querySelector(".input").value; let newTask = document.querySelector(".tasks") let newTxt = document.createElement("div") newTxt.className = "newDiv" let newP = document.createTextNode(input) newP.className = "newInput" let deletButton = document.createElement("button") let deletTxt = document.createTextNode("Delet") deletButton.className = "deletButton" deletButton.appendChild(deletTxt) newTxt.appendChild(newP) newTxt.appendChild(deletButton) newTask.appendChild(newTxt) deletButton.onclick = function () { removeEle = document.getElementsByClassName(".newDiv") removeEle.remove(removEle) } } Creo varios divs con el mismo nombre de clase con el botón Eliminar para cada div Cuando quiero eliminar un div en particular, lo selecciono usando querySelector
Pero el primer elemento siempre se elimina, no el div que quiero eliminar.
Con la declaración a continuación, obtiene el primer .newDiv ,
document.getElementsByClassName(".newDiv")y en consecuencia lo estás eliminando.
Debe hacer uso de los cierres y eliminar newTxt , ya que ya está disponible en el momento de la declaración del controlador de eventos.
deletButton.onclick = function(){ newTxt.parentNode.remove(newTxt) }document.getElementsByClassName(".newDiv")La línea de código anterior devolverá el primer elemento con el nombre de clase newDiv y esa es la razón por la que su código elimina el primer elemento.
Entonces, para eliminar el elemento en el que se hizo clic, debe seleccionar el botón en el que se hizo clic y eliminar su padre.
deletButton.onclick = function(){ this.parentNode.remove(); }document.getElementsByClassName siempre devolverá un objeto similar a una matriz de todos los elementos secundarios que tienen todos los nombres de clase dados.
Esto no tiene ninguna conexión con la fila de la que eligió eliminar el elemento, esto involucra a todos los elementos que tienen el nombre de clase especificado.
Tambiénelement.remove es incorrecta.
Puede seleccionar la fila desde la que se activó el evento de eliminación seleccionando el elemento más cercano con el nombre de clase newDiv del elemento de destino del evento de clic.
violín de trabajo
let add = document.querySelector(".add") add.onclick = function () { let input = document.querySelector(".input").value; let newTask = document.querySelector(".tasks") let newTxt = document.createElement("div") newTxt.className = "newDiv" let newP = document.createTextNode(input) newP.className = "newInput" let deletButton = document.createElement("button") let deletTxt = document.createTextNode("Delet") deletButton.className = "deletButton" deletButton.appendChild(deletTxt) newTxt.appendChild(newP) newTxt.appendChild(deletButton) newTask.appendChild(newTxt) deletButton.onclick = function (e) { removeEle = e.target.closest('.newDiv'); removeEle.remove() } } <div class="tasks"></div> <input type="text" class="input"> <button class="add">Add</button>