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

Olá, estouEstou 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.

Não faço ideia de como eu poderia fazer para apagar apenas a linha clicada. Alguém saberia me ajudar ? Agradeço desde já.

Olá, 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.

Não faço ideia de como eu poderia fazer para apagar apenas a linha clicada. Alguém saberia me ajudar ? Agradeço desde já.

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.

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

adicionou 35 caracteres ao conteúdo
Fonte Link
Ricardo Pontual
  • 23,2mil
  • 2
  • 33
  • 64
<DOCTYPE html>
<head>
</head>
<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>
    <script>
        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();
        }
    </script>
</body>
</html>

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>

<DOCTYPE html>
<head>
</head>
<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>
    <script>
        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();
        }
    </script>
</body>
</html>

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>

Complemento
Fonte Link
<!DOCTYPE<DOCTYPE html>
<head>
</head>
<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>
    <script>
        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();
        }
    </script>
</body>
</html>

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.

<!DOCTYPE html>
<head>
</head>
<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>
    <script>
        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);              
    
                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() {
            
            var linha = document.getElementById('campo');
            linha.remove();
        }
    </script>
</body>
</html>
<DOCTYPE html>
<head>
</head>
<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>
    <script>
        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();
        }
    </script>
</body>
</html>

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.

Fonte Link
Carregando