Linha padrão não é removida | jQuery: domine a biblioteca mais popular do mercado parte 1

Solucionado (ver solução)

Solucionado
(ver solução)

4
respostas

por Icaro Henrique de Oliveira Werly

| 163k xp | 17 posts

Analista de Suporte Computacional

O meu código está um pouco diferente mas é pouca coisa,

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/libs/materialize.min.css">
    <link rel="stylesheet" href="./css/libs/google-fonts.css">
    <link rel="stylesheet" href="./css/style.css">
    <script src="https://use.fontawesome.com/9c1f8524d8.js"></script>
    <title>Typer Game</title>
</head>
<body>
    <!-- oncontextmenu="return false" onkeydown="return false" -->
    <div class="container">
        <h1 class="center" id="typeWrite"></h1>
        <p class="frase center">Esta frase tem oito belas e grandiosas palavras.</p>

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

        <textarea class="campo-digitacao" cols="40" rows="8"></textarea>

        <div class="botoes">
            <a id="botao-reiniciar" class="btn-floating btn-large waves-effect waves-light red">
                <i class="material-icons">restore</i>
            </a>
        </div>

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

        <section class="placar">
            <h3 class="center">Placar</h3>
            <table class="centered bordered responsive-table">
                <thead>
                    <tr>
                        <th>Nome</th>
                        <th>N° de palavras</th>
                        <th>Remover</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Pedro</td>
                        <td>10</td>
                        <td>
                            <a href="#" class="botao-remover" onclick="removeLinhaPadrao()">
                                <i class="small material-icons icone-excluir">delete</i>
                            </a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </section>

    </div>

    <script src="./js/jquery.js"></script>
    <script src="./js/main.js"></script>
    <script src="./js/libs/typeit.min.js"></script>
    <script src="./js/typer.js"></script>
</body>
</html>

Role para baixo e verá mais uma resposta

4 respostas

por Icaro Henrique de Oliveira Werly

| 163k xp | 17 posts

Analista de Suporte Computacional

05/05/2021

jQuery

var tempoInicial = $("#tempo-digitacao").text();
var botaoReiniciar = $("#botao-reiniciar");
var campoDigitacao = $(".campo-digitacao");

// Pega o ano atual e atualiza no footer
const ano = $("#ano");
const anoAtual = new Date();

ano.text(anoAtual.getFullYear());

$(function() {

    atualizaTamanhoFrase();
    inicializaContadores();
    inicializaCronometro();
    inicializaMarcadores();
    botaoReiniciar.click(reiniciaJogo);

});

function atualizaTamanhoFrase() {

    var frase = $(".frase").text();
    var numeroPalavras= frase.split(" ").length;
    var tamanhoFrase = $("#tamanho-frase");
    tamanhoFrase.text(numeroPalavras);

}

function inicializaContadores() {

    campoDigitacao.on("input", function() {

        var conteudo = campoDigitacao.val();
        var quantidadePalavra = conteudo.split(/\S+/).length - 1;

        $("#contador-palavras").text(quantidadePalavra);

        var quantidadeCaracteres =  conteudo.length;

        $("#contador-caracteres").text(quantidadeCaracteres);

    });

}

function inicializaCronometro() {

    var tempoRestante = $("#tempo-digitacao").text();

    campoDigitacao.one("focus", function() {

        botaoReiniciar.attr("disabled", true);

        var cronometroID = setInterval(function() {

        tempoRestante--;

        $("#tempo-digitacao").text(tempoRestante);

            if(tempoRestante < 1) {

                clearInterval(cronometroID);
                finalizaJogo();

            }

        }, 1000)

    });

}

function finalizaJogo() {

    campoDigitacao.attr("disabled", true);
    botaoReiniciar.attr("disabled", false);
    campoDigitacao.toggleClass("campo-desativado");

    inserePlacar();

}

function inicializaMarcadores() {

    var frase = $(".frase").text();
    campoDigitacao.on("input", function() {

        var digitado = campoDigitacao.val();
        var comparavel = frase.substr(0, digitado.length);

        if(digitado == comparavel) {

            campoDigitacao.addClass("borda-verde");
            campoDigitacao.removeClass("borda-vermelha");

        } else {

            campoDigitacao.addClass("borda-vermelha");
            campoDigitacao.removeClass("borda-verde");

        }

    });

}

function inserePlacar() {

    var corpoTabela = $(".placar").find("tbody");
    var usuario = "Pedro";
    var numeroPalavras = $("#contador-palavras").text();

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

    corpoTabela.prepend(linha);

}

function novaLinha(usuario, numPalavras) {

    var linha = $("<tr>");
    var colunaUsuario = $("<td>").text(usuario);
    var colunaPalavras = $("<td>").text(numPalavras);
    var colunaRemover = $("<td>");

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

    link.append(icone);

    colunaRemover.append(link);

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

    return linha;

}

function removeLinhaPadrao() {

    var linhaRemover = $(".botao-remover").click(function() {

        console.log($(this).parent().parent().remove());

    });

    return linhaRemover;

}

function removeLinha() {

    event.preventDefault();
    $(this).parent().parent().remove();

}

function reiniciaJogo() {

    campoDigitacao.attr("disabled", false);
    campoDigitacao.val(""); // apaga o conteudo do campo

    $("#contador-palavras").text("0"); 
    $("#contador-caracteres").text("0");
    $("#tempo-digitacao").text(tempoInicial);

    inicializaCronometro();

    campoDigitacao.toggleClass("campo-desativado");

    campoDigitacao.removeClass("borda-verde");
    campoDigitacao.removeClass("borda-vermelha");

}

por Icaro Henrique de Oliveira Werly

| 163k xp | 17 posts

Analista de Suporte Computacional

05/05/2021

Porem com essa função que fiz function removeLinhaPadrao() {

var linhaRemover = $(".botao-remover").click(function(event) {

    event.preventDefault();
    console.log($(this).parent().parent().remove());

});

return linhaRemover;

}

e no html

<td>
                            <a href="#" class="botao-remover" onclick="removeLinhaPadrao()">
                                <i class="small material-icons icone-excluir">delete</i>
                            </a>
                        </td>

por Matheus Henrique Castiglioni

| 5303.5k xp | 9004 posts

Instrutor Senior Software Engineer

10/05/2021

Fala ai Icaro, tudo bem? Como assim remover linha padrão? Consegue por favor me passar mais detalhes sobre a mesma?

Fico no aguardo.

solução!

por Hailton da

| 200.3k xp | 3 posts

12/05/2021

var linhaRemover = $(".botao-remover").click(function(event) {

    event.preventDefault();
    console.log($(this).parent().parent().remove()); <== O erro esta aqui, se vc retirar o console.log ele executa.

});

return linhaRemover;COPIAR CÓDIGO
}