Delete a single image from a foreach (firebase storage)

I have a foreach that shows a couple of images, I wish for these to be deleted if needed. I fetch the src of the image and path/file name of the image from Firestore to show with the image on my site (they are uploaded to storage and firestore).

how do I identify a single image out of all of them and delete just that one?

Js Code

  const i = query(collection(db, "teamImages"));
        const unsubscribe = onSnapshot(i, (querySnapshot) => {
            const teams = document.querySelector('.teamimages');

            querySnapshot.forEach((doc) => {
                const docData = doc.data();
                const article = teams.appendChild(document.createElement('article'));
                article.innerHTML = `
        <p class="path"></p>
        <img class="team-image">
    `;
                article.children[0].textContent = docData.path;
                article.children[1].src = docData.url;

                console.log("Current data: ", docData);
            });


            document.getElementById("team-image").addEventListener("click", function deleteImage() {

                if (confirm('Are you sure you want to delete this image')) {

                   
                    



                } else {
                    // Do nothing!
                    console.log('Image not deleted');

                };


            });
        });

the images are in an articles section (createElement)

Ive had some undefined and null errors when I tried to put in any firebase delete code.

Im just not sure how I can define the image filename to use as the reference to delete the file.