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

我试图删除选中复选框的当前行（

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>

Nro。
诺玛
阿诺
委员会
814002983
哈勒姆。
1979
非asperiores。
90234555
sequi中的Ea。
1994
Ad modi ea。
29
临时Eos。
1970
Eaque错误。
93
耳垂。
2014
耳垂。

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

---

你必须这样做：

$（函数（）{
$（“#删除”）。单击（函数（）{
$（“#tablaNorma tbody tr”）。每个（函数（）{
if（$（this）.find（“输入：复选框：选中”）.length>0）$（this.remove（）；
})
})
$（“.toggleCheckbox”）.change（函数（）{
$（“tablaNorma tbody tr”）.find（“输入：复选框”）.prop（“选中”，this.checked）；
})
})

Nro。
诺玛
阿诺
委员会
814002983
哈勒姆。
1979
非asperiores。
90234555
sequi中的Ea。
1994
Ad modi ea。
29
临时Eos。
1970
Eaque错误。
93
耳垂。
2014
耳垂。

就像这样：

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

}

---

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

//将更改事件处理程序绑定到toggleCheckbox：
$（'#toggleCheckbox'）。on（'change'，function（）{
var-toggle=这个；
//查找最近的表：
$（this）.closest（'表'）
//在tbody中找到复选框：
.find（'t正文输入[type=“checkbox”]”）
//根据设置这些复选框的“已选中”属性
//切换到toggleCheckbox的选中状态：
.prop（'checked'，toggle.checked）；
});
//将更改事件处理程序绑定到tbody：
$（'tbody'）。在（'change'，函数（）{
//获取tbody中的所有复选框：
var all=$（'t正文输入[type=“checkbox”]”），
//仅从该集合中获取选中的复选框：
checked=all.filter（“：checked”）；
//将toggleCheckbox的checked属性设置为true或false
//根据复选框的数量是否大于0；
//如果是，我们使用评估来确定正确/错误，
//否则，我们将其设置为false（如果没有复选框）：
$（'#toggleCheckbox'）.prop（'checked'，all.length>0？all.length==checked.length:false）；
});
//绑定单击事件处理程序：
$（'btnEliminar'）。在（'click'，函数（）{
//在tbody中查找选中的复选框：
$（'tablaNorma t正文输入[type=“checkbox”]：选中'）
//查找最近的tr元素：
.最近的（'tr'）
//删除它们：
.remove（）；
//触发tbody上的“更改”事件（调用更改
//事件处理程序以适当设置toggleCheckbox）：
$（'tablaNorma tbody'）.change（）；
});

删除行
Nro。
诺玛
阿诺
委员会
814002983
哈勒姆。
1979
非asperiores。
90234555
sequi中的Ea。
1994
Ad modi ea。
29
临时Eos。
1970
Eaque错误。
93
耳垂。
2014
耳垂。
是否希望每个复选框都可以随意切换（选中/取消选中）？当按下一个按钮时，包含复选框的所有行都将被删除？这将起作用，但如果没有更多的
tr
要删除，则也会删除表格标题（thead）。是的，它被选中，因为它有一个用于切换全部的输入，并且thead内部有一个tr，所以它会删除OK，它可以正常工作，但我也希望如果没有tr，而不是屏幕上的tr，那么隐藏#tablaNorma并显示警报或其他我正在尝试但无法让它正常工作的东西，请将此部分添加到您的解决方案中好吗？我是否可以将选择器
#tablaNorma
作为参数传递，或者构建一个函数，因为代码将应用于多个位置，要应用于DRY，我想如何将其转换为函数？
$('#btnEliminar').on('click', function () {
    DoSomething("#tablaNorma"); 
});

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

}