No momento que a var linkRemove é criada o length é zero, pois o carrinho está vazio, não entrando no for.
Tentei utilizar a sua lógica na função removerDoCarrinho, mas tinha que dar um clique a mais para remover.
(Parecia que no primeiro clique ela registrava a ação, e só nos outros cliques ela realizava a ação).
Então fiz de outra forma.
<html>
<head>
<title>Loja virtual</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1 class="titulo">Pipones digital shop</h1>
</header>
<section id="main">
<h2>Vitrine:</h2>
<main id="produtos">
</main>
<h2>Carrinho:</h2>
<div id="carrinho">
</div>
</section>
<script>
const itens = [
{
id: 0,
nome: "Camiseta",
img: "imgs/imgPlaceholder.png",
quantidade: 0
},
{
id: 1,
nome: "Short",
img: "imgs/imgPlaceholder.png",
quantidade: 0
},
{
id: 2,
nome: "Sapato",
img: "imgs/imgPlaceholder.png",
quantidade: 0
},
]
inicializarLoja = () => {
var containerProdutos = document.getElementById("produtos");
itens.map((val)=> {
containerProdutos.innerHTML += `
<div class="produto-single">
<img src="${val.img}"/>
<p>${val.nome}</p>
<a class="link-carrinho" key="${val.id}" href="#">Adicionar ao carrinho</a>
</div>
`;
})
}
inicializarLoja();
atualizarCarrinho = () => {
var containerCarrinho = document.getElementById("carrinho");
containerCarrinho.innerHTML = "";
itens.map((val)=> {
if(val.quantidade > 0) {
containerCarrinho.innerHTML += `
<p>${val.nome} | Quantidade: ${val.quantidade}
<a class="link-remove" key="${val.id}" href="javascript:removerDoCarrinho(${val.id})">Remover item</a>
</p>
<hr>
`;
}
})
}
var links = document.getElementsByClassName("link-carrinho");
for(var i = 0; i < links.length; i++) {
links[i].addEventListener("click", function() {
let key = this.getAttribute("key");
itens[key].quantidade++;
atualizarCarrinho();
});
}
removerDoCarrinho = function(id) {
for(var i = 0; i < itens.length; i++) {
if (itens[i].id == id) {
itens[i].quantidade -= 1;
atualizarCarrinho();
}
}
}
</script>
</body>
</html>
