如何在JavaScript动态表格中实现逐行删除功能？

问题根源 #

你的代码未为新增行的删除按钮绑定删除逻辑，且表单内的独立删除按钮无明确功能，导致出现误删所有行的情况。要实现逐行删除，需为每行的删除按钮添加对应事件，触发删除当前行的操作。

修改方案 #

我们可以通过两种方式实现：在创建行时直接为删除按钮绑定事件，或是用事件委托适配动态生成的元素。以下是完整的修改代码：

修改后的JavaScript代码

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

  // 方式1：直接为当前行的删除按钮绑定删除事件
  excluirTd.querySelector('.excluir').addEventListener('click', function() {
    contatoTr.remove();
  });

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

  // 可选：添加后清空表单输入框
  formContato.reset();
}

// 方式2：事件委托（适合大量动态生成行的场景，可替换方式1）
// document.getElementById('corpoAgenda').addEventListener('click', function(e) {
//   const deleteBtn = e.target.closest('.excluir');
//   if (deleteBtn) {
//     deleteBtn.closest('tr').remove();
//   }
// });

修改后的HTML代码（移除混淆性按钮）

<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>
        <!-- 移除表单内多余的删除按钮，避免误操作 -->
      </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>
      </thead>
      <tbody id="corpoAgenda">
      </tbody>
    </table>
  </div>
</div>

<div class="mt-5 p-4 bg-dark text-white text-center">
</div>

关键说明 #

1. 直接绑定事件：在创建每行的删除按钮时，立即为其添加点击事件，触发后移除当前行，逻辑直观简单。
2. 事件委托：将点击事件绑定到表格tbody父元素，通过判断点击目标定位到删除按钮，再删除对应行，适合大量动态生成行的场景，性能更优。
3. 移除冗余按钮：表单内的独立删除按钮无对应逻辑，易引发误操作，因此建议移除；若需清空所有行的功能，可单独为其添加清空tbody的事件。

内容的提问来源于stack exchange，提问作者JOÃO AUGUSTO VENANCIO DA SILVA