const element = document.createElement("article"); // add classes element.classList.add("grocery-item"); const attr = document.createAttribute("data-id"); attr.value = id; element.setAttributeNode(attr); element.innerHTML = `<p class="title">${value}</p> <div class="btn-container"> <button type="button" class="edit-btn"><i class="fas fa-edit"></i></button> <button type="button" class="delete-btn"><i class="fas fa-trash"></i></button> </div>`; // append child list.appendChild(element); // Edit Button const editBtn = element.querySelector(".edit-btn");

Estoy creando un sitio web de lista de compras y cada elemento de la lista, como la leche y los huevos, se incluye en su propio elemento de artículo que se está creando en el javascript y también he agregado el código para eso. Ahora, en la captura de pantalla que publiqué, agregué 3 elementos en la lista de compras, por lo que hay 3 elementos de artículos creados según el código proporcionado bajo el cual se encuentran los botones editar y eliminar. Cuando hago clic en el botón de edición de, supongamos huevos, ¿cómo sabe que hice clic en el botón de edición de los huevos?

 const editBtn = element.querySelector(".edit-btn");

Esta línea accede al botón de edición dentro del elemento del artículo requerido, pero ¿cómo accede al elemento del artículo requerido en primer lugar? No hay querySelector para seleccionar todos los elementos del artículo en el resto del código.

No estoy completamente seguro de cómo hacer esta pregunta, así que dígame algunas mejoras.