Tengo una interfaz donde las imágenes se muestran mediante el método .prepend(), estoy tratando de eliminar las imágenes una por una haciendo clic en el botón Cerrar y también elimino todas las imágenes con un clic en un botón , pero no tengo idea de cómo hacer ?
Aquí está la interfaz de la lista de imágenes a continuación, se muestran 3 imágenes a partir de ahora ¿Cómo puedo adjuntar el botón de cerrar y eliminar imágenes individuales y también con 1 clic?
HTML:
<div id="imageList"> </div>JS:
//Images are stored in this array as base64 var imagesBase64 = []; // add images in the array ImagesBase64 function addToDownload() { imagesBase64.push(dataURL); appendImageToList(dataURL); } const imageList = document.getElementById("imageList"); function appendImageToList(image) { var img = document.createElement("img"); img.src = image; imageList.prepend(img); }Creé una demostración que hace más o menos lo que pediste (pero usando jQuery). La página se inicializa con una lista de imágenes codificadas en una matriz. Cada imagen se agrega en #imageList dentro de su propio contenedor y se agrega un pequeño cuadro rojo para atrapar el evento de clic cuando desea eliminar la imagen de la lista. Además de eso, hay un botón para eliminarlos todos a la vez:
//a list of img urls needed to feed the list of pictures with some const images = ['https://www.w3schools.com/css/img_5terre.jpg', 'https://www.w3schools.com/css/img_forest.jpg', 'https://www.w3schools.com/css/img_lights.jpg', 'https://www.w3schools.com/css/img_mountains.jpg']; //inits the imageList with pictures coming from images constant //..so when the document is ready, $(document).ready(() => { //for each url picture in the images constant images.forEach((o, i) => { //append a picture to imageList having that url appendImageToList(o); }); }); //appends an image to the list (where image is a picture url) function appendImageToList(image) { var img = document.createElement("img"); img.src = image; //the img will be enclosed in a container let container = $('<div>', { class: 'imgContainer' }); container.append(img); //creates the close handle for this new picture and adds an event handler on its click event let closeHandle = $('<div>', { class: 'closeHandle' }); //adds content x to the close handle closeHandle.append('<i class="fa-solid fa-circle-xmark"></i>'); closeHandle.click(() => { //when the button is clicked, remove this image from the list removeOneImageFromList($(event.target).closest('.imgContainer')); }); container.append(closeHandle); //adds the container inside the imageList $('#imageList').prepend(container); } //removes all images from the list function removeAllImages() { $('#imageList .imgContainer').remove(); } //removes a specific image from the list function removeOneImageFromList(imgParentElement) { $(imgParentElement).remove(); } /* rule to style every single img container */ #imageList .imgContainer { position: relative; width: fit-content; } /* rule to style the close handle */ #imageList .closeHandle { position: absolute; top: 15px; right: 15px; text-align: center; cursor: pointer; } <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-3.6.0.slim.js"></script> <button type="button" onclick="removeAllImages();">Remove all images</button> <br><br> <div id="imageList"> </div>