Remove elements from array on click in js?-CodePudding

I have an interface [ref below image] where whenever user clicked on close button Image needs to disappear from interface as well as from the array as images are stored in array but currently it is disappeared from front-end interface not from the array.

How will I delete element from interface and removed from array together ?

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

CodePudding user response：

Modify your removeOneImageFromList to also use Array.splice to remove the element that matches the src of the image contained in the container that is being removed. You should also modify removeAllImages to empty the list.

//removes all images from the list
function removeAllImages() {
  images = []
  $('#imageList .imgContainer').remove();
}

//removes a specific image from the list
function removeOneImageFromList(imgParentElement) {
  images.splice(images.indexOf($(imgParentElement).find('img').attr('src')), 1)
  $(imgParentElement).remove();
}