如何为动态生成的表格行添加删除按钮并实现单行删除？

我来帮你搞定这个删除行的问题！你的代码里主要有两处关键问题导致删除功能失效：一是删除按钮的参数传递没有对应到实际的行元素，二是删除函数的选择逻辑和行元素的标识不匹配。下面是具体的修正步骤和完整代码：

问题分析 #

• 删除按钮参数无效：你调用deleterow(id)时，id变量并没有被定义，而且添加的表格行也没有设置对应的id属性，导致函数不知道要删除哪一行。
• 删除选择器不匹配：deleterow函数里用$("#rows-"+id+"").remove()，但你添加的行并没有rows-xxx格式的id，自然找不到要删除的元素。
• 语法小错误：AddData函数多了一个冗余的闭合大括号，会导致代码执行异常。

修正方案 #

最简单的实现方式是通过删除按钮找到它所在的父级<tr>元素，直接删除该行，不需要额外的id标识。同时修正代码里的语法和属性设置错误。

完整修正代码 #

HTML部分

<html>
  <div id = "data">
    <form id = "person">
      <br><br>
      Name:
      <select id = "locapavm" name = "pavlocation" >
        <option value="rami">rami</option>
        <option value="lara">lara</option>
        <option value="ahmed">ahmed</option>
      </select>
      <br><br>
      City:
      <select id="sevepavm" name="pavseverity">
        <option value="">- Severity -</option>
        <option value="Low">Low</option>
        <option value="Medium"> Medium</option>
        <option value="High">High</option>
      </select>
      <br><br>
      <textarea id="planpavm" name="pavplan" ></textarea>
      <input id = "resetBtn" type = "button" value = " Reset " onclick = "ResetForm()">
      <input id = "addBtn" type = "button" value = " Add " onclick = "AddData()">
    </form>
  </div>
  <h3>List Of Persons</h3>
  <div id = "tab">
    <table id = "list" cellspacing = "0px" cellpadding = "20px" style="text-align:center">
      <thead>
        <tr>
          <td>Name</td>
          <td>Seve</td>
          <td>plan</td>
          <td>Action</td> <!-- 新增操作列标题，让表格结构更清晰 -->
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
</html>

JavaScript部分

function AddData(){
  var name = document.getElementById("locapavm").value;
  var city = document.getElementById("sevepavm").value;
  var plan = document.getElementById("planpavm").value;
  
  // 创建行元素，删除按钮点击时传递当前按钮对象
  var row = `<tr>
    <td>${name}</td>
    <td>${city}</td>
    <td>${plan}</td>
    <td><button onclick="deleterow(this)">Delete</button></td>
  </tr>`;
  
  $(row).appendTo("#list tbody");
}

function ResetForm(){
  document.getElementById("person").reset();
}

function deleterow(btn){
  // 通过按钮找到它所在的最近<tr>元素并删除
  $(btn).closest("tr").remove();
}

关键修改点 #

1. 给删除按钮的onclick传递this，代表当前按钮元素，让函数能定位到按钮所在的行。
2. deleterow函数里用closest("tr")方法，直接找到按钮所属的表格行，无需额外的id标识。
3. 修正了HTML里text-align = "center"的错误（需放在style属性中生效），并给按钮设置了唯一id，避免重复id导致的潜在问题。
4. 移除了AddData函数中冗余的闭合大括号，修复语法错误。

这样修改后，点击每行的Delete按钮就能精准删除对应的行了！

内容的提问来源于stack exchange，提问作者Berrytdm