Estoy creando un proyecto simple usando html, css, vanilla js para frontend y firebase 9 como backend. Este es mi código relevante
índice.html
<body> <div class="container"></div> </body>índice.js
importing firebase functions here refering those functions // Getting data from firestore and storing it in array onSnapshot(colRef, (snapshot) => { let Data = [] snapshot.docs.forEach((doc) => { Data.push({ ...doc.data(), id: doc.id }) }) // rendering data const container = document.querySelector('.container') let template = '' Data.forEach(dataItem => { template += ` <div>Some other data rendered here</div> <span class="material-icons" id="del" data-id="${data.id}">delete</span> ` }) container.innerHTML = template }) //refering to btn element to get data-id value and delete that particular doc const del = document.querySelector('.del') del.addEventListener('click', (e) => { const docId = e.target.getAttribute('data-id') deleteDoc(doc(db, 'myData', docId)) .then(() => { console.log('Deleted Successfully') }) })Pero cuando intento obtener ese atributo de identificación de datos, muestra el error "variable del is null". No puedo referir el elemento btn que se representa en html.
Intenté usar DOMContentLoaded también, pero aún muestra el mismo error. ¿Hay alguna otra forma de referirse a este elemento en particular o estoy haciendo algo mal aquí?
Gracias
ACTUALIZAR:
Oye, está funcionando después de hacer referencia a todo el elemento contenedor y agregar el detector de eventos a ese elemento y obtener condicionalmente la identificación del documento.
// deleting docs container.addEventListener('click', (e) => { if(e.target.id === 'del'){ const id = e.target.dataset.id const docRef = doc(db, "myDB", id) deleteDoc(docRef) .then(() => { console.log('Deleted Successfully') }) } })