1
resposta

Código não atualiza e nem apaga o item no array

Entrei num bug e não consigo remover. Mesmo seguindo todo o método de aula, meu elemento não atualizar e nem deleta do array de itens.

const form = document.getElementById('novoItem')
const lista = document.getElementById('lista')
const itens = JSON.parse(localStorage.getItem("itens")) || []

itens.forEach((elemento) => {
    criaElemento(elemento)
});

form.addEventListener("submit", (evento) =>{
    evento.preventDefault()
    const nome = evento.target.elements['nome']
    const quantidade = evento.target.elements['quantidade']



    const existe = itens.find( elemento => elemento.nome === nome.value)

    const itemAtual = {
        "nome": nome.value,
        "quantidade": quantidade.value
       }  

    if(existe){
        itemAtual.id = existe.id

        atualizaElemento(itemAtual)
        itens[itens.findIndexOf(elemento => elemento.id === existe.id)] = itemAtual
    } else {

        itemAtual.id = itens[itens.length -1] ? (itens[itens.length -1]).id + 1 : 0;
        criaElemento(itemAtual)
        itens.push(itemAtual)
    }



    localStorage.setItem("itens", JSON.stringify(itens))

    nome.value = ""
    quantidade.value= ""

})


function criaElemento(item){
   const novoItem = document.createElement('li')
   novoItem.classList.add("item")

   const numeroItem = document.createElement('strong')
   numeroItem.innerHTML = item.quantidade
    numeroItem.dataset.id = item.id
   novoItem.appendChild(numeroItem)
   novoItem.innerHTML += item.nome
   novoItem.appendChild(botaoDeleta(item.id))


   lista.appendChild(novoItem)
}

function atualizaElemento(item){
    document.querySelector("[data-id='"+item.id+"']").innerHTML = item.quantidade
}

function botaoDeleta(){
    const elementoBotao = document.createElement("button")
    elementoBotao.innerHTML = "X"
    elementoBotao.addEventListener("click", function() {
        deletaElemento(this.parentNode)
    })

    return elementoBotao
}

function deletaElemento(tag, id){
    tag.remove()

    itens.splice(itens.findIndexOf(elemento => elemento.id === id), 1)
    localStorage.setItem("itens", JSON.stringify(itens))

}
1 resposta

tente usar esse codigo

//Função para criar botão com evento de click nos itens, e retornar os itens clicados function botaoDeleta(id) { const elementoBotao = document.createElement("button"); elementoBotao.innerText = "X";

elementoBotao.addEventListener("click", function () { deletaElemento(this.parentNode, id); });

return elementoBotao; }

//Função para deletar os itens enviados da função botaoDeleta no array de itens e no navegador

function deletaElemento(tag, id) { tag.remove();

itens.splice( itens.findIndex((elemento) => elemento.id === id), 1 );

localStorage.setItem("itens", JSON.stringify(itens)); }