jquery怎麼移除選擇的行

在前端開發中，我們經常會遇到需要對表格中的資料進行操作的需求。例如，我們可能需要刪除某個行或多個行。在 jQuery 中，我們可以使用 remove() 方法來刪除 DOM 元素，然後透過選擇器來選擇我們需要刪除的元素。下面，我們就來看看具體的實作方法。

1. 透過按鈕觸發事件

在 HTML 中，我們可以新增一個按鈕，當使用者點擊該按鈕時，我們可以執行刪除動作。首先，在表格中每一行的最後一列中新增一個刪除按鈕，並為該按鈕新增一個自訂的 data-index 屬性，用於標識該按鈕所在的行的索引值。

<table id="table">
  <thead>
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>001</td>
      <td>张三</td>
      <td>22</td>
      <td><button class="btn-delete" data-index="0">删除</button></td>
      </tr>
    <tr>
      <td>002</td>
      <td>李四</td>
      <td>25</td>
      <td><button class="btn-delete" data-index="1">删除</button></td>
    </tr>
    <tr>
      <td>003</td>
      <td>王五</td>
      <td>30</td>
      <td><button class="btn-delete" data-index="2">删除</button></td>
    </tr>
  </tbody>
</table>

然後，我們可以為這些按鈕新增一個事件監聽器，當按鈕被點擊時，我們就可以根據該按鈕所在行的索引值來刪除對應的行：

$(document).on('click', '.btn-delete', function() {
  var index = $(this).attr('data-index');  // 获取该按钮所在行的索引值
  $('#table tr').eq(index + 1).remove(); // 删除指定索引的行，注意加一是因为表头占据了第一行
});

2. 透過勾選複選框觸發事件

除了按鈕觸發事件外，另一個常見的方式就是勾選複選框觸發事件。在這種情況下，我們可以在每個行前新增一個複選框，當使用者勾選某些複選框後，就可以執行刪除操作。

首先，我們需要在每個行前都新增一個複選框，並使用data-index 屬性來識別該複選框所在行的索引值：

<tr>
  <td><input type="checkbox" class="check-item" data-index="0"></td>
  <td>001</td>
  <td>张三</td>
  <td>22</td>
  <td><button class="btn-delete">删除</button></td>
</tr>
<tr>
  <td><input type="checkbox" class="check-item" data-index="1"></td>
  <td>002</td>
  <td>李四</td>
  <td>25</td>
  <td><button class="btn-delete">删除</button></td>
</tr>
<tr>
  <td><input type="checkbox" class="check-item" data-index="2"></td>
  <td>003</td>
  <td>王五</td>
  <td>30</td>
  <td><button class="btn-delete">删除</button></td>
</tr>

接下來，我們為表格新增一個"全選" 的複選框。當該複選框被勾選時，所有行前的複選框都會被勾選。反之，如果取消 "全選" 複選框的勾選，則所有行前的複選框也將被取消勾選。

<input type="checkbox" id="check-all">全选

$('#check-all').click(function() {
  var isChecked = $(this).prop('checked'); // 获取全选复选框的状态
  $('.check-item').prop('checked', isChecked); // 将所有行前的复选框的状态设置为与全选复选框相同
});

最後，我們為刪除按鈕新增一個點擊事件監聽器。在該事件處理函數中，我們首先取得所有勾選了的複選框所在行的索引值，然後使用 remove() 方法將這些行刪除。

$(document).on('click', '.btn-delete', function() {
  var $checkedItems = $('.check-item:checked'); // 获取所有勾选了的复选框
  var indexes = [];
  $checkedItems.each(function() {
    indexes.push($(this).attr('data-index')); // 将每个勾选了的行所在索引值添加到数组中
  });
  $('#table tr').eq(indexes).remove(); // 删除所有勾选了的行
});

綜上所述，透過上述兩種方式，我們可以很方便地實現刪除表格中指定的行。

以上是jquery怎麼移除選擇的行的詳細內容。更多資訊請關注PHP中文網其他相關文章！