0

Basicamente fiz um sistema de favoritar imagens ao clicar para salvar no local storage.

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

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

Eu consegui listar todas as imagens favoritadas em uma pagina, percorrendo-as e adicionando uma função de onclick para cada, e queria remover apenas a imagem que eu clicar.

segue código completo: https://codepen.io/bielb2/pen/dyMWmMa

18
  • a resposta que eu dei te ajudou?
    – clone por
    Commented 27/08/2020 às 18:39
  • vou verificar agora
    – bielb2
    Commented 27/08/2020 às 19:44
  • lembra que voce tem que adicionar o onclick="removeimg(this)" nas miniaturas de imagem que aparece na div para escolher qual quer remover
    – clone por
    Commented 27/08/2020 às 19:49
  • fiz de tudo, mas não estou conseguindo adicionar o onclick nas imagens, tentei fazer pelo innerHTML mas não reconhece a função...
    – bielb2
    Commented 27/08/2020 às 20:48
  • cara consegui arrumar, deu certo a parte de excluir cada imagem, só não estou conseguindo listar todas agora.
    – bielb2
    Commented 27/08/2020 às 21:00

1 Resposta 1

1

Pelo oque vc falou uma das solução seria essa adicione onclick="removeimg(this)" nas img quando for mostrar e crie essa nova função

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

mudando a função updateFavoritos

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

//atualizar a div quando remover a imagem

    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)"/>';
     });
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .