Delete the clicked image from the Storage location

Question

Basically I made a system to favorite images by clicking to save in Storage location.

let favorites = JSON.parse(localStorage.getItem('favorites')) || []

localStorage.setItem('favorites', JSON.stringify(favorites))

I was able to list all the favorite images on a page, scrolling through them and adding an onclick function for each, and wanted to remove only the image that I click.

follow full code: https://codepen.io/bielb2/pen/dyMWmMa

Answer 1

For what you said one of the solutions would be this add onclick="removeimg(this)" img when to show and create this new function

        function removeimg(el){
   //prgar src clicado
    var src = el.src;
  //prgar item do storege
    storege =JSON.parse(localStorage.getItem('favorites'));
    let newimg= false;
   //foreache nos item
    storege.forEach(img=>{
        if(src != img){
            if(!newimg){
                newimg = [img];
                console.log(newimg);
            }else{
               newimg.push(img);
            }
        }
        });
       //salvar as imagem que ele não clicou no favorito
        localStorage.setItem('favorites', JSON.stringify(newimg))
atualizardiv();    
}

changing the updateFavorites function

     function updateFavorites() {
    const { existsInLocalStorage, index, imageSource } = getState()

   // existsInLocalStorage
     //   ? favorites.splice(index, 1)
       // : favorites.push(imageSource)
    let quantidade = favorites.length;
    if(quantidade>0){
        favorites.push(imageSource)
                localStorage.setItem('favorites', JSON.stringify(favorites))
        }else{
         favorites=[imageSource];
         localStorage.setItem('favorites', JSON.stringify(favorites))
        }
    }

//update the div when removing the image

    function atualizardiv(){
        $('.modal').innerHTML='';
        $('.modal').innerHTML=' <h3>Clique <span id="remove">aqui</span> para remover todas as imagens</h3>'+
           ' <span class="X" draggable="true">&times;</span>';
    storege =JSON.parse(localStorage.getItem('favorites'));
    storege.forEach(img=>{
     $('.modal').innerHTML= $('.modal').innerHTML+'<img src="'+img+'" onclick="removeimg(this)"/>';
     });
}