2
respostas

Duvida sobre JQuery

Olá amigos, estou colocando JQuery em uma pagina que usei no curso Javascript e agora, travei na remoção da tr. Que diferente do que esta no curso aqui não pretende usar como referencia uma td dentro da tr mas sim de fora. Tenho um botão para remover linhas fora da tr. Só que não estou conseguindo rodar esta remoção:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>@ - Listagem de produtos</title>
        <link rel="stylesheet" type="text/css" href="reset.css">
        <link rel="stylesheet" type="text/css" href="alura.css">
    </head>
    <body>
        <header>
            <div class="container">
                <h1>Controle de Produtos - @</h1>
            </div>
        </header>
        <main class="container">
            <section>
                <table>
                    <tr>
                        <th>Nome</th>
                        <th>Preço</th>
                        <th>Custo</th>
                        <th>Quantidade</th>
                        <th>Localizacao</th>
                    </tr>
                </table>
                <button id="remove-produto" class="remove">Remover produto</button>
            </section>

            <section>
                <div>Quantidade total de itens cadastrados: <span id="prod-total">0</div>
            </section>


            <section>
                <h2>Adicionar novo produto</h2>    
                <form>
                    <fieldset class="campo-nome">
                        <label for="nome">Nome:</label>
                        <input id="campo-nome" type="text" placeholder="digite o nome do seu produto">
                    </fieldset>
                    <fieldset class="campo-preco">
                        <label for="preco">Preco:</label>
                        <input id="campo-preco" type="text" placeholder="digite o preco do seu produto">
                    </fieldset>
                    <fieldset class="campo-custo">
                        <label for="custo">Custo:</label>
                        <input id="campo-custo" type="text" placeholder="digite o custo do seu produto">
                    </fieldset>
                    <fieldset class="campo-quant">
                        <label for="quant">Quantidade:</label>
                        <input id="campo-quant" type="text" placeholder="digite a quantidade do seu produto">
                    </fieldset>
                    <fieldset class="campo-local">
                        <label for="local">Localização:</label>
                        <input id="campo-local" type="text" placeholder="digite o local do seu produto">
                    </fieldset>
                    <button id="adicionar-produto" class="botao bto-principal">Adicionar</button>
                </form>
            </section>
        </main>
        <script src=jquery-2.0.3.min.js></script>
        <script>
        //funcao para ler o produto inserido
        var atualizaContador = function(){
            total = 0;
            var nomes = $(".prod-nome");

            for (var i = 0; i < nomes.length; i++) {
                var qty = $(nomes[i]);
                //converte a string para int
                var valor = parseInt(qty.text());
                total += valor;
            }

            $("#prod-total").text(nomes.length);
        }

        var removeItem = function(event){

            //previnir comportamento padrao
            event.preventDefault();

            $("#produto").remove();
            var total = $("#prod-total");

            //conversao e remoção do item
            var totalInt = parseInt(total);
            var novoTotal = totalInt - 1;
            $("prod-total").text(novoTotal);
            atualizaContador();
        }

        var aposInicializado = function(){

            $(".remove").click(removeItem);
            atualizaContador();
        }
        $(aposInicializado);
        </script>
        <script src="adiciona.js"></script>

    </body>
</html>

Obrigado galera. =)

2 respostas

Yuri, não fiz o curso mas acho que posso te ajudar aqui. Vou supor que o script adiciona.js vai criar as linhas dos produtos na tabela, correto? Beleza.

Primeiro: a sua função de remover um produto está utilizando o atributo id para removê-lo. Porém, somente um elemento pode existir para um determinado id. Então há duas alternativas para isso funcionar: 1. Você deveria dar um jeito de atribuir um id único para cada produto e dar um jeito de recuperar esse id quando clicar no botão. Para isso, o adequado seria ter um <select> ao lado do botão para escolher o produto ou algo semelhante, já que o botão em si não consegue saber qual produto você quer remover. 2. Ao clicar o botão, ele remove sempre o primeiro ou o último produto da lista, e não um escolhido.

Repare que as duas opções são meio ruins. A primeira é até bastante complicada, então acho que não é ideal.

O botão individual para cada um dos produtos existe por esse motivo. O código fica complicado de tal modo que a existência de botões individuais se torna uma prática muito mais simples e fácil de manter.

Outro detalhe que reparei: o código do método atualizaContador() já atualiza o número de produtos, então no método remove() você não precisa executar o código abaixo do comentário conversão e remoção do item. Basta chamar a função atualizaContador() como você já está fazendo ao final.

Opa chará, tudo bem? (:

Primeira coisa que eu notei é que não nenhuma tag com a classe .prod-nome e nenhuma tag com o id #produto. Com isso essas funções já não funcionam.

= /

Nessa linha do seu código:

$("prod-total").text(novoTotal);

O jquery vai procurar alguma tag com o nome <prod-total> devido ao fato de que vc não colou nenhum . para classe e nem # para id.

Só mais alguns detalhes. Nessa função atualizaContador, na linha final não seria:

$("#prod-total").text(total);

Ao invés de:

$("#prod-total").text(nomes.length);

Bom acho que aí vão algumas dicas para te ajudar!!

Abração, se aparecer mais coisa só falar aqui (: