[Dúvida] Não estou conseguindo excluir itens de uma lista proveniente de uma API

Olá, Geovana. Tudo bem?

O problema está no código de excluiProduto.js. O querySelector usado para selecionar o botão de excluir ([data-botao-excluir]) só captura o primeiro elemento que corresponde ao seletor no momento em que o script é carregado. No entanto, os botões de exclusão são adicionados dinamicamente à página por mostrarProdutos.js após a execução da função acessoApi(). Assim, o evento de clique não é associado aos botões criados posteriormente. Além disso, também é preciso mexer um pouco na lógica de alguma outras funções para que recebam o id a ser excluído.

1 - No HTML, adicione uma tag <script> para o arquivo excluirProdutos:

<script src="/scripts/mostrarProdutos.js" type="module" ></script>
<script src="/scripts/excluirProdutos.js" type="module" ></script>

2 - A função mostraProduto deve receber id por parâmetro para que posteriormente a função excluiItem possa receber esse mesmo id. Além disso, você também precisa adicionar o id ao DOM, no exemplo abaixo eu usei o data-id para isso:

function mostraProduto(nome, valor, imagem, id) { // Passando id por parâmetro
    const produto = document.createElement('li');
    produto.className = 'conteiner__produtos-item';
    produto.innerHTML = `<li class="conteiner__produtos-item">
                    <figure class="conteiner__produtos-card">
                        <img src="${imagem}" alt="${nome}">
                            <caption>${nome}</caption>
                    </figure>
                    <div class="conteiner__produtos-valor">
                        <p>${valor}</p>
                    </div> 
                    <button class="conteiner__produtos-botao-lixeira">
                        <img src="/assets/bin icon.png" alt="Excluir item"  data-botao-excluir data-id=${id}>  
                        // Passando o id no data-id, coloquei ambos na tag img, pois se ficasse no button, seria necessário clicar fora da imagem para funcionar!
                    </button>               
                </li>`;

    return produto;
}

Lembre também de atualizar o acessoApi:

async function acessoApi() {
    try {
        const listaApi = await conectaApi.listaProdutos();
        listaApi.forEach((elemento) =>
            lista.appendChild(
                mostraProduto(
                    elemento.nome,
                    elemento.valor,
                    elemento.imagem,
                    elemento.id // Passando o id do elemento
                )
            )
        );
    } catch {
        lista.innerHTML = `<h1 class="mensagem__principal">Ops! Não foi possível encontrar os produtos. 
        Tente recarregar a página.</h1>`;
    }
}

3 - Você pode usar delegação de eventos, associando o evento de clique a um elemento pai comum (como a lista de produtos <ul class="conteiner__produtos">) em vez de associá-lo diretamente aos botões. Isso garante que novos botões adicionados dinamicamente ainda respondam ao evento:

function configurarEventos() {
    const listaProdutos = document.querySelector('[data-lista]');

    listaProdutos.addEventListener('click', (evento) => {
        if (evento.target.matches('[data-botao-excluir]')) {
            const id = evento.target.getAttribute('data-id'); // Obtém o ID do botão
            if (id) {
                excluiItem(id); // Exclui o item com o ID
            }
        }
    });
}

configurarEventos();

Essas mudanças devem ser o suficiente para que o seu projeto funcione corretamente, mas caso ainda precise de ajuda, não hesite em me chamar!

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)