How to remove selected rows with jquery

In front-end development, we often encounter the need to operate data in tables. For example, we may need to delete a row or multiple rows. In jQuery, we can use the remove() method to delete DOM elements, and then use the selector to select the elements we need to delete. Next, let’s take a look at the specific implementation method.

1. Triggering events through buttons

In HTML, we can add a button, and when the user clicks the button, we can perform a delete operation. First, add a delete button to the last column of each row in the table, and add a custom data-index attribute to the button to identify the index value of the row where the button is located.

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

Then, we can add an event listener for these buttons. When the button is clicked, we can delete the corresponding row based on the index value of the row where the button is located:

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

2. Triggering events by checking checkboxes

In addition to button triggering events, another common way is to check checkboxes to trigger events. In this case, we can add a checkbox before each row, and when the user checks certain checkboxes, the delete operation can be performed.

First, we need to add a checkbox before each row and use the data-index attribute to identify the index value of the row where the checkbox is located:

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

Next, we add a "Select All" checkbox to the table. When this checkbox is checked, all the checkboxes in front of the row will be checked. On the contrary, if the "Select All" checkbox is unchecked, the checkboxes in front of all rows will also be unchecked.

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

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

Finally, we add a click event listener for the delete button. In this event handling function, we first get the index values ​​of the rows where all checked check boxes are located, and then use the remove() method to delete these rows.

$(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(); // 删除所有勾选了的行
});

To sum up, through the above two methods, we can easily delete the specified rows in the table.

The above is the detailed content of How to remove selected rows with jquery. For more information, please follow other related articles on the PHP Chinese website!