javascript - 在 jquery 中删除多个选定的行

Question

我在网格中有许多行。第一列是一个复选框。如果我选中该复选框并单击删除按钮，则应删除选中的行。如果我随机检查超过 10 行，则应删除所选行。我如何使用 jquery 执行此操作。

JsFiddle

请看这个 fiddle 。在这里，如果我选择第 2 行和第 5 行复选框并按下删除按钮，则应该删除第 2 行和第 5 行。它应该动态发生而不是静态发生。作为一个例子，我提到了第二和第五。如果我在表格中选中多个复选框，需要删除所有选中的行。请帮助我，我该怎么做？

#codexpl th, #codexpl td{
    padding:0.8em;
    border: 1px solid;
}
#codexpl th{
    background-color:#6699FF;
    font-weight:bold;
}

<br><br>
<input type="button" value ="Delete">
<table id="codexpl">
    <tr>
        <th>#</th>
        <th>Columna</th>
        <th>Relative</th>
        <th>Isso</th>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>This</td>
        <td>Column</td>
        <td>Is</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>Coloumn</td>
        <td>two</td>
        <td>this</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>is</td>
        <td>not equals</td>
        <td>a</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>the</td>
        <td>Column</td>
        <td>real</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>first</td>
        <td>One</td>
        <td>Coloumn</td>
    </tr>
</table>

Answer 1

Use on handler on button and use :checked selector to find checked elements.

.remove()将从 DOM

中删除一组匹配的元素

试试这个:

$('[type="button"]').on('click', function() {
  $('td input:checked').closest('tr').remove();
});

#codexpl th,
#codexpl td {
  padding: 0.8em;
  border: 1px solid;
}
#codexpl th {
  background-color: #6699FF;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<br>
<br>
<input type="button" value="Delete">
<table id="codexpl">
  <tr>
    <th>#</th>
    <th>Columna</th>
    <th>Relative</th>
    <th>Isso</th>
  </tr>
  <tr>
    <td>
      <input type="checkbox">
    </td>
    <td>This</td>
    <td>Column</td>
    <td>Is</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox">
    </td>
    <td>Coloumn</td>
    <td>two</td>
    <td>this</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox">
    </td>
    <td>is</td>
    <td>not equals</td>
    <td>a</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox">
    </td>
    <td>the</td>
    <td>Column</td>
    <td>real</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox">
    </td>
    <td>first</td>
    <td>One</td>
    <td>Coloumn</td>
  </tr>
</table>

Fiddle here