0
291
Views¿Cómo puedo hacer una eliminación múltiple en js?
Quiero tener una confirmación antes de eliminar una cuenta. ¿Cómo puedo hacerlo?
Esta es la imagen de la interfaz de usuario de las cuentas. 
Este es el código html.
<a href="uses_script.php?user_id=<?php echo $row['id'];?>&username=<?php echo $_SESSION['user_username']; ?>" id = "del" data-toggle="tooltip" data-placement="top" title="Delete"> <i class="mdi mdi-close"></i></a>Este es el javascript.
const deleteIcon = document.querySelectorAll("del"); deleteIcon.addEventListener("click", (e) => { const confirmVar = confirm("Do you want to proceed? "); if (!confirmVar) e.preventDefault(); }Lo que quiero hacer es antes de eliminar usuarios, quiero tener una confirmación de que cuando haga clic en Aceptar, se eliminará y cuando haga clic en cancelar, simplemente se cerrará.
2 answers
Answer question0
Este podría ser el código correcto.
const deleteIcon = document.querySelectorAll("#del"); deleteIcon.forEach ((element) => { element.addEventListener("click", (e)=>{ const confirmVar = confirm("Do you want to proceed?"); if (!confirmVar){ e.preventDefault();}}) }) He iterado a través de los botones para agregar el detector de eventos para cada uno de ellos y también he agregado el parámetro e para que identifique el evento.
NOTA: addEventListener no funciona para una colección de elementos . Tendrá que iterar a través de cada elemento.
0
Su oyente no se aplica al elemento correctamente.
Use un # en su Selector de consultas para orientar un elemento por ID:
const deleteIcon = document.querySelector("#del");Sin embargo, como hay varias líneas, puede que no sea la mejor idea usar una ID para el botón Eliminar, use una clase en su lugar.
Agregue class="del" (o un nombre de clase de su elección) a su elemento <a> y use el siguiente Selector de consultas (usar un . significa seleccionar una clase):
const deleteIcons = document.querySelectorAll(".del");Esto devolverá una lista de elementos que luego puede iterar para agregarle detectores de eventos:
deleteIcons.forEach(function(element) { element.addEventListener("click", (e) => { const confirmVar = confirm("Do you want to proceed? "); if (!confirmVar) e.preventDefault(); }); });Otras lecturas: