选中复选框后删除当前行（tr）

Question

我正在尝试删除选中复选框的当前行（tr元素）。我正在研究这段代码：

$('#btnEliminar').on('click', function () {
    var $my_checkbox = $('#toggleCheckbox');
    var $all_checkboxes = $my_checkbox.closest('tbody').find('input[type=checkbox]');
    $all_checkboxes.each(function () {
        if ($(this).prop('checked')) {
            // here should remove the current tr
            return false;
        }
    });
});

但是我不知道如何从这里开始，我因为不知道如何删除标记的行而陷入困境。考虑到#toggleCheckbox将切换所有，但也可以逐个选择。我可以得到一些帮助吗？

这是HTML代码：

<table id="tablaNorma" class="table">
    <thead>
        <tr>
            <th><input type="checkbox" name="toggleCheckbox" class="toggleCheckbox" id="toggleCheckbox"></th>
            <th>Nro.</th>
            <th>Norma</th>
            <th>Año</th>
            <th>Comité</th>
        </tr>
    </thead>
    <tbody id="normaBody">
        <tr class="">
            <td>
                <input type="checkbox" value="1">
            </td>
            <td>814002983</td>
            <td>Harum.</td>
            <td>1979</td>
            <td>Non asperiores.</td>
        </tr>
        <tr class="">
        <td>
            <input type="checkbox" value="2">
            </td>
            <td>90234555</td>
            <td>Ea in sequi.</td>
            <td>1994</td>
            <td>Ad modi ea in.</td>
        </tr>
        <tr class="">
            <td>
            <input type="checkbox" value="3">
            </td>
            <td>29</td>
            <td>Eos tempore.</td>
            <td>1970</td>
            <td>Eaque error.</td>
        </tr>
        <tr class="">
            <td>
            <input type="checkbox" value="4">
            </td>
            <td>93</td>
            <td>Earum ut.</td>
            <td>2014</td>
            <td>Earum ut.</td>
        </tr>
    </tbody>
</table>

Answer 1

你必须这样做：

$(function () {

$("#delete").click(function () {

    $("#tablaNorma tbody tr").each(function () {

        if ($(this).find("input:checkbox:checked").length > 0) $(this).remove();

    })

})

$(".toggleCheckbox").change(function(){

   $("#tablaNorma tbody tr").find("input:checkbox").prop("checked",this.checked);
})

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table id="tablaNorma" class="table">
    <thead>
        <tr>
            <th><input type="checkbox" name="toggleCheckbox" class="toggleCheckbox" id="toggleCheckbox"></th>
            <th>Nro.</th>
            <th>Norma</th>
            <th>Año</th>
            <th>Comité</th>
        </tr>
    </thead>
    <tbody id="normaBody">
        <tr class="">
            <td>
                <input type="checkbox" value="1">
            </td>
            <td>814002983</td>
            <td>Harum.</td>
            <td>1979</td>
            <td>Non asperiores.</td>
        </tr>
        <tr class="">
        <td>
            <input type="checkbox" value="2">
            </td>
            <td>90234555</td>
            <td>Ea in sequi.</td>
            <td>1994</td>
            <td>Ad modi ea in.</td>
        </tr>
        <tr class="">
            <td>
            <input type="checkbox" value="3">
            </td>
            <td>29</td>
            <td>Eos tempore.</td>
            <td>1970</td>
            <td>Eaque error.</td>
        </tr>
        <tr class="">
            <td>
            <input type="checkbox" value="4">
            </td>
            <td>93</td>
            <td>Earum ut.</td>
            <td>2014</td>
            <td>Earum ut.</td>
        </tr>
    </tbody>
</table>
<input type="button" id="delete"/>

Answer 2

就像这样：

$('#btnEliminar').on('click', function () {
    $("#tablaNorma input[type='checkbox']:checked").closest("tr").remove();
});

修改： 执行标题。

$('#btnEliminar').on('click', function () {
    $("#tablaNorma input[type='checkbox']:checked:not('.toggleCheckbox')").closest("tr").remove();
});

修改：

根据需要。

$('#btnEliminar').on('click', function () {
    $("#tablaNorma input[type='checkbox']:checked:not('.toggleCheckbox')").closest("tr").remove();
    if($("#tablaNorma tbody tr").length == 0)
    {
        // do something, like hide table
        $("#tablaNorma").hide();
    }
});

修改：

将选择器传递给函数。做同样的事情，但我们将选择器作为参数传递。

$('#btnEliminar').on('click', function () {
    DoSomething("#tablaNorma"); 
});

function DoSomething(selector)
{
    $(selector + " input[type='checkbox']:checked:not('.toggleCheckbox')").closest("tr").remove();

}

Answer 3

由于您使用的是jQuery，因此可以使用.remove方法：

$('#btnEliminar').on('click', function () {
    // use the table's id to find checkboxes in tbody
    var $all_checkboxes = $('#tablaNorma>tbody').find('input[type=checkbox]');
    $all_checkboxes.each(function () {
        if ($(this).prop('checked')) {
            // find the tr and remove
            $(this).closest('tr').remove();
            return false;
        }
    });
});

Answer 4

虽然您已经接受了答案，但我个人建议使用以下方法（将隐式系统绑定在一起）：

＆＃13;

＆＃13;

// binding a change event-handler to the toggleCheckbox:
$('#toggleCheckbox').on('change', function () {
  var toggle = this;
  // find the closest table:
  $(this).closest('table')
  // find the checkboxes within the tbody:
  .find('tbody input[type="checkbox"]')
  // set the 'checked' property of those checkboxes according
  // to the checked state of the toggleCheckbox:
  .prop('checked', toggle.checked);
});

// binding the change event-handler to the tbody:
$('tbody').on('change', function () {
  // getting all the checkboxes within the tbody:
  var all = $('tbody input[type="checkbox"]'),
  // getting only the checked checkboxes from that collection:
      checked = all.filter(':checked');
  // setting the checked property of toggleCheckbox to true, or false
  // according to whether the number of checkboxes is greater than 0;
  // if it is, we use the assessment to determine true/false,
  // otherwise we set it to false (if there are no checkboxes):
  $('#toggleCheckbox').prop('checked', all.length > 0 ? all.length === checked.length : false);
});

// binding the click event-handler:
$('#btnEliminar').on('click', function () {
  // finding the checked checkboxes in the tbody:
  $('#tablaNorma tbody input[type="checkbox"]:checked')
  // finding the closest tr elements:
  .closest('tr')
  // removing them:
  .remove();

  // triggering the 'change' event on the tbody (to call the change
  // event-handler to set the toggleCheckbox appropriately):
  $('#tablaNorma tbody').change();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnEliminar">Remove rows</button>
<table id="tablaNorma" class="table">
  <thead>
    <tr>
      <th>
        <input type="checkbox" name="toggleCheckbox" class="toggleCheckbox" id="toggleCheckbox">
      </th>
      <th>Nro.</th>
      <th>Norma</th>
      <th>Año</th>
      <th>Comité</th>
    </tr>
  </thead>
  <tbody id="normaBody">
    <tr class="">
      <td>
        <input type="checkbox" value="1">
      </td>
      <td>814002983</td>
      <td>Harum.</td>
      <td>1979</td>
      <td>Non asperiores.</td>
    </tr>
    <tr class="">
      <td>
        <input type="checkbox" value="2">
      </td>
      <td>90234555</td>
      <td>Ea in sequi.</td>
      <td>1994</td>
      <td>Ad modi ea in.</td>
    </tr>
    <tr class="">
      <td>
        <input type="checkbox" value="3">
      </td>
      <td>29</td>
      <td>Eos tempore.</td>
      <td>1970</td>
      <td>Eaque error.</td>
    </tr>
    <tr class="">
      <td>
        <input type="checkbox" value="4">
      </td>
      <td>93</td>
      <td>Earum ut.</td>
      <td>2014</td>
      <td>Earum ut.</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

参考文献：

• closest()。
• filter()。
• find()。
• on()。
• prop()。
• remove()。