如何从JavaScript动态表中删除行?

Question

我的问题是，我试图使程序用户添加的每一行都被删除，但只能逐行删除，如下所示。目前，我的程序正在从表中删除所有行，这不是目标，是的，这增加了许多-用户想要多少-他有可能删除一行，如果他想要的话。

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

与其尝试添加"delete"全局操作，将click事件分别分配给每一行的delete按钮，这样它就可以获得对您实际想要删除的行的引用。

这里的重要变化是将这些行添加到行创建函数中:

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

之前，您的代码试图将对按钮的引用传递给deletar函数，然后遍历到它的parentNode以查找行及其rowIndex。这不起作用，因为按钮的父节点实际上是<td>，而不是您想要的<tr>。你可以通过使用parentNode.parentNode来解决这个问题，但这将是非常脆弱的;相反，我将其更改为简单地传递行本身，因为您已经方便地在contatoTr中有对它的引用。

下面的演示(删除了一些无关的代码和布局):

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>