Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Não consigo remover as linhas

Pessoal, não estou conseguindo remover as linhas, este foi o código que fiz.

let inserePlacar = () => {
    let corpoTabela = $(".placar").find("tbody");
    let usuario = "Edilson";
    let numPalavras = $("#contador-palavras").text();

    var linha = novaLinha(usuario, numPalavras);
    linha.find(".botao-remover").click(removeLinha);

    corpoTabela.append(linha);
}

let novaLinha = (usuario, palavras) => {
    let linha = $("<tr>");
    let colunaUsuario = $("<td>").text(usuario);
    let colunaPalavras = $("<td>").text(palavras);
    let colunaRemover = $("<td>");

    let link = $("<a>").addClass("botao-remover").attr("href", "#");
    let icone = $("<i>").addClass("small").addClass("material-icons").text("delete");

    link.append(icone);

    colunaRemover.append(link);

    linha.append(colunaUsuario);
    linha.append(colunaPalavras);
    linha.append(colunaRemover);

    return linha;
}

let removeLinha = () => {
    event.preventDefault();
    $(this).parent().parent().remove();
}
4 respostas

Oi Edilson tudo bem?

Poderia postar aqui a parte HTML do seu código por gentileza.

André, aqui está o HTML.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/libs/materialize.min.css">
    <link rel="stylesheet" href="css/libs/google-fonts.css">
    <link rel="stylesheet" href="css/estilos.css">
    <title>Alura Typer</title>
</head>
<body>
    <div class="container">
        <h1 class="center">Alura Typer</h1>
        <p class="frase">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sapiente quidem recusandae sit optio vitae minima natus officiis magni! Nostrum laboriosam quaerat quam pariatur eius cum asperiores odit voluptatum, fugiat possimus</p>

        <ul class="informacoes center">
            <li>
                <i class="small material-icons icones">description</i>
                <span id="tamanho-frase">30</span> palavras
            </li>
            <li>
                <i class="small material-icons icones">query_builder</i>
                <span id="tempo-digitacao">10</span> segundos
            </li>
        </ul>

        <textarea class="campo-digitacao" cols="30" rows="10"></textarea>
        <a class="btn-floating btn-large waves-effect waves-light red" id="botao-reiniciar">
            <i class="material-icons">restore</i>
        </a>

        <ul class="center">
            <li><span id="contador-palavras">0</span> palavras</li>
            <li><span id="contador-caracteres">0</span> caracteres</li>
        </ul>

        <section class="placar">
            <h3 class="center">Placar</h3>
            <table class="centered bordered">
                <thead>
                    <tr>
                        <th>Usuário</th>
                        <th>Nº de palavras</th>
                        <th>Remover</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </section>
    </div>

    <script src="js/jquery.js"></script>
    <script src="js/main.js"></script>
    <script src="js/placar.js"></script>
</body>
</html>
solução!

André, consegui achar o erro. Acredito que por está usando arrow functions o escopo não estava cobrindo.

Edilson, substitui seu HTML e o placar.js e aqui estou conseguindo remover a linha normalmente. Deve ser outro arquivo que está dando problema. A solução mais simples é zipar a pasta do seu projeto colocar no dropbox e me disponibilizar o link. Aí vou analisar e ver onde está o problema.

Mas se você conseguiu achar o erro maravilha pode fechar seu tópico. Estaremos aqui a qualquer momento que precisar e bons estudos!!!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software