How to remove row from a JavaScript dynamic table?

Question

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.

 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); }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> <div class="p-5 text-black text-center bg-roxo"> <h1 id="titulo">João Augusto</h1> </div> <div class="container mt-5"> <div class="container"> <h5>Agenda</h5> <form id="formulario"> <div class="row py-2"> <div class="col-1"> <label for="nome">Nome:</label> </div> <div class="col-5 "> <input type="text" class="form-control" placeholder="Escrava o primeiro nome" name="nome"> </div> </div> <div class="row py-2"> <div class="col-1"> <label for="email">Email:</label> </div> <div class="col-5"> <input type="text" class="form-control" placeholder="email" name="email"> </div> <div class="col-1"> <label for="cel">Celular:</label> </div> <div class="col-5"> <input type="text" class="form-control" placeholder="(XX)XXXX-XXXX" name="cel"> </div> </div> <div class="row py-2"> <div class="col-1"> <label for="insta">Instagram:</label> </div> <div class="col"> <input type="text" class="form-control" placeholder="Instagram" name="insta"> </div> <div class="col-1"> <label for="face">Facebook:</label> </div> <div class="col"> <input type="text" class="form-control" placeholder="Facebook" name="face"> </div> </div> <div class="salvarexcluir"> <button type="button" class="btn btn-info" id="adicionar-contato">Salvar</button> <button class='btn btn-danger exluir'><i class='fa fa-trash-o'>Excluir</i></button> </div> </form> </div> <div class="container mt-3"> <table class="table table-striped" 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 class="mt-5 p-4 bg-dark text-white text-center"> </div>

Answer 1

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/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"> <div class="container"> <form id="formulario"> <div class="row py-2"> <div class="col-1"> <label for="nome">Nome:</label> </div> <div class="col-5 "> <input type="text" class="form-control" placeholder="Escrava o primeiro nome" name="nome"> </div> </div> <div class="row py-2"> <div class="col-1"> <label for="email">Email:</label> </div> <div class="col-5"> <input type="text" class="form-control" placeholder="email" name="email"> </div> <div class="col-1"> <label for="cel">Celular:</label> </div> <div class="col-5"> <input type="text" class="form-control" placeholder="(XX)XXXX-XXXX" name="cel"> </div> </div> <div class="row py-2"> <div class="col-1"> <label for="insta">Instagram:</label> </div> <div class="col"> <input type="text" class="form-control" placeholder="Instagram" name="insta"> </div> <div class="col-1"> <label for="face">Facebook:</label> </div> <div class="col"> <input type="text" class="form-control" placeholder="Facebook" name="face"> </div> </div> <div class="salvarexcluir"> <button type="button" class="btn btn-info" id="adicionar-contato">Salvar</button> </div> </form> </div> <!-- Tabela que conterá os dados--> <div class="container mt-3"> <table class="table table-striped" 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>