Tengo dificultades para obtener la id o el src de una imagen que muestro con el siguiente enfoque.
Primero, tengo un elemento div:
<div id="FeedImages"; class="imageFeed"></div>y luego recorro las imágenes que están almacenadas en la base de datos de esta manera:
temp2=0; do{ var img = document.createElement("img"); img.setAttribute("src",ImagePath); img.setAttribute("id",temp2); document.getElementById("FeedImages"+i).appendChild(img); temp2++; }while(temp<100); Este código funciona bien en el sentido de que las imágenes se muestran como deseo. Pero también quiero tener una funcionalidad en la que pueda eliminar la imagen, y para eso necesito obtener la id o el src de cualquier imagen. Intenté simplemente agregar onclick="test(this.id)"; en div , donde la función solo alertaría al clicked id , pero el resultado siempre aparece como undefined . Seguramente debería haber la misma manera de salir id=temp2 , pero lo encuentro complicado por todas las razones equivocadas. ¿Alguien podría compartir ideas por favor?
Para eso, debe envolver la imagen y el botón en un div, agregarle un listado de eventos y eliminar el nodo principal (div).
const ImagePath = setImageArray(); let temp = 0; do { const div = document.createElement("div"); const img = document.createElement("img"); img.setAttribute("src", ImagePath[temp]); img.setAttribute("id", temp); const butn = document.createElement("button"); butn.addEventListener('click', e => { e.target.parentElement.remove(); }); butn.innerHTML = 'X'; div.appendChild(img); div.appendChild(butn); document.getElementById("FeedImages").appendChild(div); temp++; } while (temp < 10); //Setting array img source for demonstration purpose function setImageArray() { let arr = []; for (let i = 0; i < 10; i++) { arr.push(i.toString()) } return arr } <div id="FeedImages" class="imageFeed"></div>Agregue un atributo onclick al img a medida que se crea. Puede pasar el evento de clic a la función a la que llama y obtener la id del e.target que es el destino del evento de clic.
var img = document.createElement("img"); img.setAttribute("src", "https://picsum.photos/200/300"); img.setAttribute("id", "tempId"); img.setAttribute("onclick","deleteImg(event)") document.getElementById("FeedImages").appendChild(img); function deleteImg(e) { console.log(e.target.id) // do something with the id } <div id="FeedImages"></div>