jquery 如何删除当前行

在网页开发中，常常会遇到需要删除表格当前行或者列表中当前项等需求，而 jQuery 作为强大的 JavaScript 库，为我们提供了便捷的方式来实现这一功能。

当面对表格结构时，若要删除当前行，首先要明确当前行的定位。假设我们有一个简单的 HTML 表格：

<table id="myTable">
  <tr>
    <td>数据 1</td>
    <td>数据 2</td>
    <td><button class="deleteBtn">删除</button></td>
  </tr>
  <tr>
    <td>数据 3</td>
    <td>数据 4</td>
    <td><button class="deleteBtn">删除</button></td>
  </tr>
</table>

在 jQuery 中，我们可以使用以下代码来实现点击“删除”按钮删除当前行：

$(document).ready(function() {
  $('.deleteBtn').click(function() {
    $(this).closest('tr').remove();
  });
});

这里的 $(this) 指代当前被点击的按钮。closest('tr') 方法会沿着 DOM 树向上查找最近的 <tr> 元素，也就是当前按钮所在的行。最后通过 remove() 方法将这一行从 DOM 中移除。

如果是在列表结构中，比如无序列表：

<ul id="myList">
  <li>列表项 1 <button class="deleteItem">删除</button></li>
  <li>列表项 2 <button class="deleteItem">删除</button></li>
</ul>

相应的 jQuery 代码为：

$(document).ready(function() {
  $('.deleteItem').click(function() {
    $(this).closest('li').remove();
  });
});

原理与表格的情况类似，通过 $(this) 定位到点击的按钮，closest('li') 找到对应的列表项，再用 remove() 方法删除。

另外，还可以使用 parent() 方法来实现类似功能。例如在上述列表例子中，我们也可以这样写：

$(document).ready(function() {
  $('.deleteItem').click(function() {
    $(this).parent('li').remove();
  });
});

parent('li') 直接找到按钮的父元素 <li> 然后删除。

掌握 jQuery 中删除当前行的方法，能极大地提升网页交互性和用户体验，无论是简单的表格操作还是复杂的页面元素管理，都能轻松应对。