Remove elements from array on click in js?

Question

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

Get the url inside removeOneImageFromList then remove the URL from the array using filtering. — user5734311
– user5734311, Commented Apr 20, 2022 at 8:10
What is the issue? Getting the url or removing a string from an array of strings? (also, please do not use w3schools) — user5734311
– user5734311, Commented Apr 20, 2022 at 8:13
@ChrisG w3school is just for ref, I have arrays of images(as array stored) which I need to delete on click close button from array. — kate moss
– kate moss, Commented Apr 20, 2022 at 8:15
Why do you repeat the question? I know what you're trying to do, I'm trying to help you help yourself instead of simply handing out the code. — user5734311
– user5734311, Commented Apr 20, 2022 at 8:23

Tibrogargan · Accepted Answer · 2022-04-20 08:15:10Z

1

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

answered Apr 20, 2022 at 8:15

Tibrogargan

4,6323 gold badges21 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Remove elements from array on click in js?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related