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. =)