JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<table id="sample_1" aria-describedby="sample_1_info">
    <thead>
        <tr>
            <th>
                <input type="checkbox" id="selecctall" />
            </th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody class="odd gradeX">
        <tr>
            <td width="5%">
                <input type="checkbox" class="checkbox1" id="1" />
            </td>
            <td width="37%">Chips And Chocolates,Bummy Chips,Plain Salted,ytrytr,hyryr</td>
        </tr>
        <tr>
            <td width="5%">
                <input type="checkbox" class="checkbox1" id="2" />
            </td>
            <td width="37%">Chips And Chocolates</td>
        </tr>
    </tbody>
</table>
<input type="button" class="btn blue" value="Delete" id="deletebtn" />

JavaScript

$('#selecctall').click(function (event) { //on click 
    if (this.checked) { // check select status
        $('.checkbox1').each(function () { //loop through each checkbox
            this.checked = true; //select all checkboxes with class "checkbox1"               
        });
    } else {
        $('.checkbox1').each(function () { //loop through each checkbox
            this.checked = false; //deselect all checkboxes with class "checkbox1"                       
        });
    }
});


$("#deletebtn").click(function () {
    var $checked = $('#sample_1 tbody input[type="checkbox"]:checked');

    if ($checked.length) {
        $checked.closest('tr').remove();
    } else {
        alert("You need to check at least one checkbox.");
    }

});