HOW TO REMOVE ROW FROM A JAVASCRIPT DYNAMIC TABLE?-CodePudding

MY PROBLEM IS THAT I AM TRYING TO MAKE EVERY LINE ADDED BY THE USER OF THE PROGRAM BE REMOVED, BUT ONLY LINE BY LINE, AS I WILL SHOW BELOW. CURRENTLY MY PROGRAM IS REMOVING ALL THE ROWS FROM THE TABLE AND THAT IS NOT THE OBJECTIVE, YES, THAT ADDED MANY - AS MANY AS THE USER WANTS -, THAT HE HAS THE POSSIBILITY OF REMOVING A ROW, IF HE WANTS. **HTML: **

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <title>João Augusto</title>
  <meta charset="utf-8">
  
<meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

</head>
<body>

<div >
  <h1 id="titulo">João Augusto</h1>
</div>

<div >
    <div >
        
        <h5>Agenda</h5>
        <form id="formulario">
            <div >
                <div >
                    <label for="nome">Nome:</label>
                </div>
                <div >
                    <input type="text"  placeholder="Escrava o primeiro nome" name="nome">
                </div>
            </div>

            <div >
                <div >
                    <label for="email">Email:</label>
                </div>
                <div >
                    <input type="text"  placeholder="email" name="email">
                </div>
                <div >
                    <label for="cel">Celular:</label>
                </div>
                <div >
                    <input type="text"  placeholder="(XX)XXXX-XXXX" name="cel">
                </div>
            </div>

            <div >
                <div >
                    <label for="insta">Instagram:</label>
                </div>
                <div >
                    <input type="text"  placeholder="Instagram" name="insta">
                </div>
                <div >
                    <label for="face">Facebook:</label>
                </div>
                <div >
                    <input type="text"  placeholder="Facebook" name="face">
                </div>
            </div>

            
                <div > 
                <button type="button"  id="adicionar-contato">Salvar</button>
                                    
                
                <button class='btn btn-danger exluir'><i class='fa fa-trash-o'>Excluir</i></button>
                
                </div>

                                
                
        </form> 
    
    </div>

    
    <div >
        <table  id="myTable">
            <thead>
                <tr>
                    <th>Nome</th>
                    <th>Email</th>
                    <th>Celular</th>
                    <th>Instagram</th>
                    <th>Facebook</th>
                    <th>Excluir</th>     
                </tr>
                
                <tr>
                    
            </thead>
            <tbody id="corpoAgenda">
                
            </tbody>
        </table>
    </div>
  
</div>

<div >
  
</div>
<script src="script-1.js"></script>
</body>
</html>

JAVASCRIPT (script-1.js)


var tituloPag = document.getElementById("titulo");



tituloPag.addEventListener("click", function(){
    tituloPag.textContent = "Bem vindo a sua agenda";
});
  

var botaoAdd = document.getElementById("adicionar-contato");

botaoAdd.addEventListener("click", addContato);

function addContato(event){
    event.preventDefault();



    
    var contatoTr = document.createElement("tr");
    
    var formContato = document.getElementById("formulario");

    
    var nomeTd = document.createElement("td");
    var emailTd = document.createElement("td");
    var celularTd = document.createElement("td");
    var instaTd = document.createElement("td");
    var faceTd = document.createElement("td");
    var excluirTd = document.createElement("td");

    
    nomeTd.textContent = formContato.nome.value;
    
    emailTd.textContent = formContato.email.value;
    celularTd.textContent = formContato.cel.value;
    instaTd.textContent = formContato.insta.value;
    faceTd.textContent = formContato.face.value;
    excluirTd.innerHTML =  "<button class='btn btn-danger excluir'><i class='fa fa-trash-o' >Excluir</i></button>";
    
    contatoTr.appendChild(nomeTd);
    contatoTr.appendChild(emailTd);
    contatoTr.appendChild(celularTd);
    contatoTr.appendChild(instaTd);
    contatoTr.appendChild(faceTd);
    contatoTr.appendChild(excluirTd);

    

    var agendaTabela = document.getElementById("corpoAgenda");
    agendaTabela.appendChild(contatoTr);
}

CodePudding user response：

Instead of trying to add your "delete" action globally for the table, assign the click event separately to each individual row's delete button, so it can get a reference to the row you actually want to delete.

The significant change here was to add these lines to your row creation function:

  // attach the "delete" action to this button for this row
  excluirTd.querySelector('button').addEventListener("click", () => {
    deletar(contatoTr)
  })

Previously your code attempted to pass a reference to the button to your deletar function, and then traverse to its parentNode to find the row and its rowIndex. This didn't work because the button's parent node was actually the <td>, not the <tr> you wanted. You could fix that by using parentNode.parentNode, but that would be pretty fragile; instead I changed it to simply pass the row itself, since you conveniently already ha a reference to it in contatoTr.

Demonstration below (with some extraneous code and layout removed):

function deletar(tr) {
  var tabela = document.getElementById('myTable');
  tabela.deleteRow(tr.rowIndex);
}

var botaoAdd = document.getElementById("adicionar-contato");

botaoAdd.addEventListener("click", addContato);

function addContato(event) {
  event.preventDefault();

  //Criando uma tr
  var contatoTr = document.createElement("tr");

  var formContato = document.getElementById("formulario");

  //Criando 06 tds
  var nomeTd = document.createElement("td");
  var emailTd = document.createElement("td");
  var celularTd = document.createElement("td");
  var instaTd = document.createElement("td");
  var faceTd = document.createElement("td");
  var excluirTd = document.createElement("td");

  //Preenchendo as Tds
  nomeTd.textContent = formContato.nome.value;
  emailTd.textContent = formContato.email.value;
  celularTd.textContent = formContato.cel.value;
  instaTd.textContent = formContato.insta.value;
  faceTd.textContent = formContato.face.value;
  excluirTd.innerHTML = "<button class='btn btn-danger excluir'><i class='fa fa-trash-o' >Excluir</i></button>";

  contatoTr.appendChild(nomeTd);
  contatoTr.appendChild(emailTd);
  contatoTr.appendChild(celularTd);
  contatoTr.appendChild(instaTd);
  contatoTr.appendChild(faceTd);
  contatoTr.appendChild(excluirTd);

  // attach the "delete" action to this button for this row
  excluirTd.querySelector('button').addEventListener("click", () => {
    deletar(contatoTr)
  })

  var agendaTabela = document.getElementById("corpoAgenda");
  agendaTabela.appendChild(contatoTr);
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<div >
  <form id="formulario">
    <div >
      <div >
        <label for="nome">Nome:</label>
      </div>
      <div >
        <input type="text"  placeholder="Escrava o primeiro nome" name="nome">
      </div>
    </div>

    <div >
      <div >
        <label for="email">Email:</label>
      </div>
      <div >
        <input type="text"  placeholder="email" name="email">
      </div>
      <div >
        <label for="cel">Celular:</label>
      </div>
      <div >
        <input type="text"  placeholder="(XX)XXXX-XXXX" name="cel">
      </div>
    </div>

    <div >
      <div >
        <label for="insta">Instagram:</label>
      </div>
      <div >
        <input type="text"  placeholder="Instagram" name="insta">
      </div>
      <div >
        <label for="face">Facebook:</label>
      </div>
      <div >
        <input type="text"  placeholder="Facebook" name="face">
      </div>
    </div>

    <div >
      <button type="button"  id="adicionar-contato">Salvar</button>
    </div>
  </form>

</div>

<!-- Tabela que conterá os dados-->
<div >
  <table  id="myTable">
    <thead>
      <tr>
        <th>Nome</th>
        <th>Email</th>
        <th>Celular</th>
        <th>Instagram</th>
        <th>Facebook</th>
        <th>Excluir</th>
      </tr>
    </thead>
    <tbody id="corpoAgenda">

    </tbody>
  </table>
</div>