Passo 4: Removendo itens
Falta o botão de remover, e com ele uma decisão de design importante: nunca alterar o array direto, sempre por uma função pura.
Estudar esta lição interativa →Último comportamento do carrinho: um botão ✕ em cada linha, que remove aquele item específico. A função removerItem(lista, id) usa .filter() para devolver um novo array sem o item daquele id, em vez de usar .splice() para alterar o array original no lugar. É por isso que o id do passo 1 importa: filtrar por nome poderia remover o item errado, se dois tiverem o mesmo nome; filtrar por id nunca erra, porque cada id é único.
Repare que, de novo, removerItem não toca o DOM nem o localStorage: ela só transforma um array em outro. Quem decide salvar e re-renderizar é o código que a chama, dentro do clique do botão. Essa disciplina de manter a lógica pura separada dos efeitos colaterais é o que torna o desafio final testável sem precisar simular nenhum clique.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Adicione itens e remova alguns com o ✕. O total se ajusta sozinho.
Sua lista de compras adiciona, remove, calcula o total e lembra tudo isso entre visitas, graças ao localStorage. É o primeiro projeto deste curso com persistência de verdade. Como próximo passo por conta própria, tente deixar a quantidade de cada item editável (botões + e −) e fazer o total se ajustar na hora.