Skip to main content
4 de 4
Remoção de ruídos de comunicação.
Augusto Vasques
  • 18,8mil
  • 10
  • 31
  • 62

Remover linha de uma tabela dinâmica com JavaScript

Estou criando uma tabela dinâmica bem simples. Funcionando para inclusão dos dados, mas não sei como faço para remover apenas a linha em que cliquei no botão deletar. Fiz uma function deletar() mas ela busca pela ID da tabela inteira e acaba excluindo a tabela por completo.

function deletar() {

            var linha = document.getElementById('campo');
            linha.remove();
        }

Não faço ideia de como eu poderia fazer para apagar apenas a linha clicada?

Segue o código completo:

var teste = 0;

function salvarDados(){
  var nome       = document.getElementById("nome").value;
  var valor      = document.getElementById("valor").value;
  var vencimento = document.getElementById("vencimento").value;

  if (!(nome == '' || valor == '' || vencimento == '')) {
    var tr = document.createElement("tr");
    var td1 = document.createElement("td");
    var td2 = document.createElement("td"); 
    var td3 = document.createElement("td");
    var btn = document.createElement("button");                 
    td1.innerHTML = nome; 
    td2.innerHTML = valor;
    td3.innerHTML = vencimento;
    btn.innerHTML = "deletar";

    btn.onclick = deletar;

    tr.appendChild(td1); 
    tr.appendChild(td2);
    tr.appendChild(td3);
    tr.appendChild(btn);              
    tr.id = 'linha' + teste;
    teste++;
    document.getElementById("campo").appendChild(tr);

    limparCampos();
  }else {
    alert('Todos os campos precisam estar preenchidos !!');
    }
}
function limparCampos(){
      var nome       = document.getElementById("nome");
  var valor      = document.getElementById("valor");
  var vencimento = document.getElementById("vencimento");
          nome.value       = '';
  valor.value      = '';
  vencimento.value = '';

}

function deletar(teste2) {

  var linha = document.getElementById('campo');
  linha.remove();
}
<body>
   Nome: <input type="text" id="nome"> 
   Valor: <input type="number" step="any" id="valor"> 
   Vencimento: <input type="date" id="vencimento"> 
   <button id="botao-salvar" onclick="salvarDados()">Salvar</button>
   <table border="1" id="campo">
      <legend>Contas a Pagar</legend>
      <tr>
         <th>Nome</th>
         <th>Valor</th>
         <th>Vencimento</th>
      </tr>
   </table>
</body>

Adicionei uma forma de atribuir ID para cada linha que for adicionada. com

tr.id = 'linha' + teste;
teste++;

Mas ainda não consigo encontrar o ID selecionado e deletar apenas essa linha.