Remove current row (tr) when checkbox is checked

Question

I'm trying to remove the current row (tr element) where checkbox is checked. I'm working on this code:

$('#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;
        }
    });
});

But I don't know how to follow from here, I'm stucked since don't know how to remove the marked rows. Take in account that #toggleCheckbox will toggle all but also can be selected one by one. Can I get some help?

This is the HTML code:

<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

Simply like this :

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

Edit : Exept header.

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

Edit :

As you need.

$('#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();
    }
});

Edit :

Pass a selector to a function. Do exact the same thing but we are passing the selector as parameter.

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

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

}

Answer 2

While you've already accepted an answer, I'd personally suggest the following approach (to tie the implicit systems together):

// 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();
});

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

References:

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

Answer 3

you have to do it something like this:

$(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 4

Since you are using jQuery, you can use the .remove method:

$('#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;
        }
    });
});