正文

学会用JS轻松删除表单中的行：一招搞定，告别重复操作

/0 浏览量
0511

在网页开发中，表单是收集用户输入数据的重要工具。而表单中的行（通常指的是<tr>元素）有时需要根据需求进行增删。手动删除表单中的行不仅效率低下，而且容易出错。今天，就让我们通过JavaScript来学习如何轻松实现这一功能，让你告别重复操作。

准备工作

在开始之前，我们需要一个简单的HTML表单作为示例：

<form id="myForm">
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>20</td>
        <td><button class="delete-row">删除</button></td>
      </tr>
      <tr>
        <td>李四</td>
        <td>22</td>
        <td><button class="delete-row">删除</button></td>
      </tr>
    </tbody>
  </table>
</form>

JavaScript实现

接下来，我们将使用JavaScript来实现删除表单中的行。这里，我们将使用事件监听器来监听每个删除按钮的点击事件，并在点击时删除对应的行。

// 获取所有删除按钮
const deleteButtons = document.querySelectorAll('.delete-row');

// 为每个删除按钮添加点击事件监听器
deleteButtons.forEach(button => {
  button.addEventListener('click', function() {
    // 获取当前按钮所在的行
    const row = button.closest('tr');
    
    // 删除行
    row.parentNode.removeChild(row);
  });
});

代码解析

  1. 首先，我们使用document.querySelectorAll('.delete-row')获取所有具有delete-row类的按钮。
  2. 然后，我们使用forEach遍历这些按钮，并为每个按钮添加一个点击事件监听器。
  3. 在事件监听器的回调函数中，我们使用button.closest('tr')获取当前按钮所在的行（<tr>元素）。
  4. 最后，我们使用row.parentNode.removeChild(row)将行从DOM中删除。

总结

通过以上步骤，我们成功地实现了使用JavaScript轻松删除表单中的行。这种方法不仅提高了开发效率，还减少了手动操作带来的错误。希望这篇文章能帮助你更好地掌握JavaScript在网页开发中的应用。

-- 展开阅读全文 --