2

[RESOLVIDO PESSOAL]

var precoFinal = 0;
       		
       	
            // função botão para adicionar um produto a um pedido    
			$('#botao').on('click', function(event){
			event.preventDefault();
			
			var codigo = $('#inputCodigo').val();
			var descricao = $('#inputDescricao').val();
			var estoque = $('#inputEstoque').val();
			var precoVenda = $('#inputPreco').val();
			var quantidade = $('#inputQuantidade').val();
			var precoTotal = quantidade * precoVenda;
		

			if (codigo != '') {
			$('#tabela').append('<tr>'+'<td>'+codigo+'</td>'+'<td>'+descricao+'</td>'+'<td>'+quantidade+'</td>'+
			'<td>'+precoVenda+'</td>'+'<td>'+precoTotal+'</td>'+'<td>'+'<button type="button" class="btn btn-danger">EXCLUIR</button>'+'</td>'+'</tr>')
			
			}
			
			$('#inputCodigo,#inputDescricao,#inputEstoque,#inputPreco,#inputQuantidade').val('');


			precoFinal += precoTotal;

			 $('#totalPedido').html("TOTAL DO PEDIDO: " + precoFinal);

			
			 
		});//final da função adicionar produto ao pedido

		$('#tabela').on('click','.btn', function(){
			$(this).closest('tr').remove();
		})			

5
  • 1
    "(...) são o mesmo elemento , mesmo ID (...)" Se tem elementos com o mesmo id já está tecnicamente incorreto.
    – Isac
    20/12/2017 às 14:02
  • @FrancoMartins, apague a sua resposta... aquele conteúdo deveria ser postado em sua pergunta. 20/12/2017 às 15:36
  • Pessoal to fazendo um teste aqui , e to achando melhor eu armazenas os dados dos itens em um objeto e partir dai 20/12/2017 às 17:47
  • @FrancoMartins compartilhe a sua solução para a questão, ela pode ser uma solução para outras pessoas 20/12/2017 às 18:58
  • Rafael, como faço isso?? 20/12/2017 às 19:23

3 Respostas 3

1

Fiz um exemplo bem pratico, veja se resolve seu problema. Lembrando que você pode alterar indicando a tr pela classe, id, position, etc... é só modificar para suas necessidades.

Modifiquei o código, agora você pode apagar pelo index0 e por check marcado.

$('#removerTrIndex').click(function() {
  if ($('tr')[0]) {
    $($('tr')[0]).remove();
  } else {
    alert('Não existe mais TR');
  }
});

$('#removerTrMarcada').click(function() {
  $('input').each(function(e,inp) {
    if ($(inp).is(':checked')) {
      $(inp).parent().parent().remove();
    }
  });
});
input[type=checkbox] {
  float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td><input type="checkbox"></input>Oi</td>
    </tr>
    <tr>
      <td><input type="checkbox"></input>Oi</td>
    </tr>
    <tr>
      <td><input type="checkbox"></input>Oi</td>
    </tr>
    <tr>
      <td><input type="checkbox"></input>Oi</td>
    </tr>
  </tbody>
</table>
<button id="removerTrIndex">Remover tr index</button>
<button id="removerTrMarcada">Remover tr marcada</button>

5
  • Fala Mateus tudo bom amigo?? então , esse seu exemplo vai removendo a TR no indice [0], mas e se o cliente quiser remover o item que ta no indice [4]? Obrigado pela ajuda 20/12/2017 às 14:03
  • Opa, tudo bem, vou modificar o código e atender sua necessidade. 20/12/2017 às 14:04
  • Pronto @FrancoMartins agora adicionei um check que caso esteja marcado ele remove a tr. 20/12/2017 às 14:11
  • Mateus Obrigado , não tem como excluir pelo botão mesmo ne? Afinal todas as TR e TD terão tudo igual e fica dificil fazer o botão entender qual delas tem que excluir, mas isso vai me ajudar a solucionar o problema. 20/12/2017 às 14:13
  • Calma @FrancoMartins tudo é possivel, você tem que identificar qual você quer excluir, pode ser um input onde ele vai colocar o numero da tr ou pode ser o checkbox, ou você pode pegar de acordo com os dados da tr, preciso do seu cenario para lhe ajudar. 20/12/2017 às 14:19
1

Você pode utilizar o deleteRow() veja um exemplo:

function deletaRow(index){
  document.getElementById('tbody').deleteRow(index);
}

function adicionaLinha(){
  var tbody = document.getElementById('tbody');

  var tr = document.createElement('tr');
  tr.onclick = function(){
    deletaRow(this.rowIndex-1)
  }


  var td = document.createElement('td');
  td.innerText = tbody.rows.length + 1;

  tr.appendChild(td);
  tbody.appendChild(tr);

}
<table>
  <thead>
    <tr >
      <th >#ID</th>
    </tr>
  </thead>
  <tbody id="tbody">
    <tr onclick="deletaRow(this.rowIndex-1)">
      <td>1</td>
    </tr>
    <tr onclick="deletaRow(this.rowIndex-1)">
      <td>2</td>
    </tr>
    <tr onclick="deletaRow(this.rowIndex-1)">
      <td>3</td>
    </tr>
    <tr onclick="deletaRow(this.rowIndex-1)">
      <td>4</td>
    </tr>
  </tbody>
</table>
<button onclick="deletaRow(0)">Remover Primeira</button>
<button onclick="adicionaLinha()">Adicionar</button>

EDIT Para deletar um específico sem ter um id pode adicionar uma função a cada <tr> quando criada, que quando clicada chama outra função para deletar passando como parâmetro seu índice obtido com this.rowIndex-1.

2
  • mas e se eu quiser remover o item 4 ou o 3 e não o 1 20/12/2017 às 17:09
  • Editei o código, clique sobre qualquer linha. 20/12/2017 às 18:38
0

Primeiro, você está utilizando th no lugar de td, alterei um pouco o seu código e adicionei a funcão para remover a tr adicionada.

var precoFinal = 0;
$('#botao').on('click', function(event){ event.preventDefault();
        
        //Trecho comentado apenas para a demonstração
        /*
        var codigo = $('#inputCodigo').val();
        var descricao = $('#inputDescricao').val();
        var estoque = $('#inputEstoque').val();
        var precoVenda = $('#inputPreco').val();
        var quantidade = $('#inputQuantidade').val();
        var precoTotal = quantidade * precoVenda;
        */
        
        //Alterado para valores fixos (demo)
        
        var codigo = "teste";
        var descricao = "descrição do produto";
        var estoque = 10;
        var precoVenda = 10.5;
        var quantidade = 5;
        var precoTotal = quantidade * precoVenda;

        if (codigo != ''){
        $('#tabela').append('<tr>'+'<td>'+codigo+'</td>'+'<td>'+descricao+'</td>'+'<td>'+quantidade+'</td>'+
        '<td>'+precoVenda+'</td>'+'<td>'+precoTotal+'</td>'+'<td class="btn btn-danger excluir"  onclick="removerProduto(this);">EXCLUIR</td>'+'</tr>');

        }

        $('#inputCodigo,#inputDescricao,#inputEstoque,#inputPreco,#inputQuantidade').val('');


        precoFinal += precoTotal;

         $('#totalPedido').html("TOTAL DO PEDIDO: " + precoFinal);

         
});

var removerProduto = (function(elemento){  
  $(elemento).closest('tr').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
  <head>
    <title>Hello, world!</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" type="text/css" href="css/estilo.css">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  </head>
  <body>
  <div class="container">
  <h1 align="center" class="mt-5">PEDIDO DE VENDA</h1>  
    <form id="formulario">
        <div class="row">
            <div class="form-group col-md-1">
              <label for="inputCodigoVendedor">CODIGO</label>
              <input type="text" class="form-control" id="inputCodigoVendedor" name="codigoVendedor">
            </div>
            <div class="form-group col-md-5">
              <label for="inputVendedor">VENDEDOR</label>
              <input type="text" class="form-control text-uppercase" id="inputvendedor" name="vendedor">
              <div id="divVendedor"></div>
            </div>
            <div class="form-group col-md-1">
              <label for="inputCodigoCliente">CODIGO</label>
              <input type="text" class="form-control" id="inputCodigoCliente" name="codigoCliente">
            </div>
            <div class="form-group col-md-5">
              <label for="inputCliente">CLIENTE</label>
              <input type="text" class="form-control text-uppercase" id="inputCliente" name="cliente">
              <div id="divCliente"></div>
            </div>
        </div>
        <div class="row">
            <div class="form-group col-md-1">
              <label for="inputCodigo">CODIGO</label>
              <input type="text" class="form-control" id="inputCodigo" name="codigo">
            </div>
            <div class="form-group col-md-6">
              <label for="inputDescricao">DESCRIÇÃO</label>
              <input type="text" class="form-control text-uppercase" id="inputDescricao" name="descricao">
              <div id="response"></div>
            </div>
            <div class="form-group col-md-1">
              <label for="inputEstoque">ESTOQUE</label>
              <input type="text" class="form-control" id="inputEstoque" name="estoque">
            </div>
            <div class="form-group col-md-2">
              <label for="inputQuantidade">QUANTIDADE</label>
              <input type="text" class="form-control" id="inputQuantidade" name="quantidade">
            </div>
            <div class="form-group col-md-2">
              <label for="inputPreco">PREÇO</label>
              <input type="text" class="form-control" id="inputPreco" name="preco">
            </div>
        </div>
      </form>
     <button class="btn btn-success mt-3" type="submit" id="botao">ADICIONAR PRODUTO</button>
     <div class="mt-3">
      <table class="table table-striped" id="tabela">
      <thead class="thead-dark">
        <tr>
          <th scope="col">CODIGO</th>
          <th scope="col">DESCRIÇÃO</th>
          <th scope="col">QUANTIDADE</th>
          <th scope="col">PREÇO UN</th>
          <th scope="col">PREÇO TOTAL</th>
          <th scope="col">AÇÃO</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
    <span id="totalPedido"></span>
</div>   
  </div>
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
    <script type="text/javascript" src="js/main1.js"></script>
  </body>
</html>

4
  • obrigado pela resposta, to achando esse erro ai Uncaught ReferenceError: removerProduto is not defined at HTMLTableCellElement.onclick ((index):1) onclick @ (index):1, deixei o código assim como o seu , so retirei aquele input do HTML pra adicionar 20/12/2017 às 16:23
  • Edita e coloca na sua pergunta o seu html e js 20/12/2017 às 16:30
  • Leandro Angelo agora sim consegui kkkkk, ta o HTML inteiro la em cima e o trecho do código JS 20/12/2017 às 16:41
  • Percebi aqui que quando da o erro ele me mandar la pro sources, la realmente não existe a TR , mas em Elements sim 20/12/2017 às 16:49

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .