I am currently working on an image grid in array form. I am trying to implement a multi-deletion functionality.
When a checkbox for each image in the grid is checked, I store the selected image's index in an array called selectedImages.
Upon clicking the delete button, I have written a remove method as shown below:
removeSelectedImages() {
console.log(this.additionalPhotos); //ImageGrid array
console.log(this.selectedImages); //selectedImages array
this.selectedImages.sort().reverse();
this.selectedImages.forEach((selectedImageIndex, index) => {
this.additionalPhotos.splice(selectedImageIndex, 1);
this.selectedImages.splice(index, 1);
});
},
The issue I'm facing is that the splice function only works once. Initially, I thought it was because of how indexes were resetting and causing issues. I tried reversing the selected images array based on their values but the problem still persists.
For example, if I select image 2 and 1, only image 2 gets deleted when the splice function is used. It doesn't enter the loop the second time. However, if I remove the splice function, it runs twice.
If you have any suggestions or best practices for solving this issue, please let me know. Thank you!