1
resposta

[Dúvida] Não está deletando as tags

Olá, eu estou criando o código junto com a instrutora, e até aqui estava tudo funcionando, mas quando chegou nessa funcionalidade de deletar tags ela não funciona quando eu estou testando. Eu clico no x pra deletar as tags adicionadas, mas não acontece nada. Seguem os códigos HTML e JS: HTML (só a parte do body):

<body>
    <aside>
        <img src="./img/Logo.svg" alt="logo do codeconnect">
        <nav>
            <ul class="lista-links">
                <li>
                    <a href="#" class="link-destaque">Publicar</a>
                </li>
                <li>
                    <a href="#">
                        <img src="./img/feed.svg">
                        Feed
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./img/account_circle.svg">
                        Perfil
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./img/info.svg">
                        Sobre nós
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./img/logout.svg">
                        Sair
                    </a>
                </li>
            </ul>
        </nav>
    </aside>

    <main>
        <div class="container-upload-imagem">
            <div class="container-imagem">
                <img src="./img/imagem1.png" alt="" class="main-imagem">
            </div>
            <button id="upload-btn">Carregar imagem</button>
            <input type="file" id="image-upload" accept="image/" style="display: none" />
            <div class="container-imagem-nome">
                <p>image_projeto.png</p>
                <img src="./img/close.svg">
            </div>
        </div>
        <div class="container-descricao">
            <h2>Novo projeto</h2>
            <form>
                <div>
                    <label for="nome">Nome do projeto</label>
                    <input type="text" id="nome" name="nome" />
                </div>
                <div>
                    <label for="descricao">Descricao</label>
                    <textarea id="descricao" name="descricao"></textarea>
                </div>
                <div>
                    <label for="categoria">Tags</label>
                    <input type="text" id="categoria" name="categoria" />
                </div>
                <ul class="lista-tags" id="lista-tags">
                </ul>
                <div class="container-botoes">
                    <button class="botao-descartar">Descartar</button>
                    <button class="botao-publicar">Publicar</button>
                </div>
            </form>
        </div>
    </main>

    <script src="scripts.js"></script>
</body>

JS (é o último bloco de código que tem que fazer a deleção de tags):

listaTags.addEventListener("click", (evento) => {
    if (evento.target.classList.contains("remove-tag")) {
        const tagQueQueremosRemover = evento.target.parentElement;
        listaTags.removeChild(tagQueQueremosRemover);
    }
})

Não faço ideia do porquê não está dando certo : (

1 resposta

Olá, Mylena. Como vai você?

Eu testei os códigos que você enviou e eles estão funcionando certinho, o que me leva acreditar que o problema pode estar em outro trecho do código.

Confere no addEventListener, se no trecho onde a tag é criada, está sendo adicionada a classe remove-tag, dessa forma:

inputTags.addEventListener("keypress", (evento) => {
    if (evento.key === "Enter") {
        evento.preventDefault();
        const tagTexto = inputTags.value.trim();
        if (tagTexto !== "") {
            const tagNova = document.createElement("li");
            tagNova.innerHTML = `
              <p>${tagTexto}</p> 
              <img src="./img/close-black.svg" class="remove-tag">` 
              // A classe deve ser adicionada nessa tag <img>
              
            listaTags.appendChild(tagNova);
            inputTags.value = "";
        }
    }
})

Se não funcionar, poderia me enviar o código completo por favor? Fico no aguardo.

Espero ter ajudado!

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

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado