-1

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.

0

1 Resposta 1

1

Para que seja possível remover uma linha específica é preciso passar para a função que vai excluir alguma referencia. Como a função é disparada, pode passar a referencia do botão usando this.

Assim, a partir do botão, é possível saber qual é a linha e podemos excluí-la usando por exemplo o índice com deleteRow, veja o exemplo abaixo. Eu mantive o seu código no jeito que está, e comentei as alterações que são:

  • btn.setAttribute('onclick', 'deletar(this)'); fiz a associação do evento assim, para poder passar o this para a função deletar:
  • tabela.deleteRow(botao.parentNode.rowIndex) fiz o rename de linha para tabela, e usei o método deleteRow, que recebe o índice da linha. Isso é facilmente obtivo por conta do botão que foi passado como referencia.

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";

    // aqui e passado "this" para a função, e this é o botao
    btn.setAttribute('onclick', 'deletar(this)');

    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(botao) {
  var tabela = document.getElementById('campo');
  // a partir do botao, pega a linha com parentNode, e o indice da linha com rowIndex
 tabela.deleteRow(botao.parentNode.rowIndex); 
}
<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>

1
  • Obrigado amigo, ajudou muito !! Solucionou minhas dúvidas e o meu problema. Commented 20/08/2021 às 1:59

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 .