How can I remove elements from prepend() by click close button?-CodePudding

I have an interface where images is being showed by .prepend() method, I am trying to remove images one by one by click on close button and also remove all the images by one click on a button, but I have no idea how to do ?

Here is image list interface below, 3 images show as of now How can I attach close button and remove images individual and also on 1 click.

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);
 }

CodePudding user response：

I crafted a demo that does more or less what you asked (but using jQuery). The page gets initialized with a list of pictures hardcoded in an array. Each picture gets appended in #imageList inside its own container and a little red box is added to trap the click event when you mean to remove the picture from the list. On top of that there's a button to remove all of them at once:

//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 ></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>