Trying to remove checkboxes from specific table rows

Question

I'm trying to add checkboxes to a table using Javascript and then remove them from totals columns (that have class "kn-table-totals"). However, my code removes all of the checkboxes. I have a table that displays some data and totals the values at the bottom. I'd like the checkboxes at the start of each data set but not the in the totals columns. See the fiddle below. Heres my code:

$('#' + view.key + '.kn-table tbody tr').each(function() {
    $(this).prepend('<td><input type="checkbox"></td>');
});
   $('#' + view.key + '.kn-table tbody tr.kn-table-totals td input').each(function() {
    $(this).remove()
}

Here's one of the checkboxes I'm trying to target:

<tr class="kn-table-totals">
<td style="background-color: rgb(238, 238, 238); border-top: 1px solid rgb(218, 218, 218); text-align: right;">
<strong>Totals - 
<input type="checkbox">
</strong>
</td>

The full code is here: https://jsfiddle.net/rainybird/50wya2k7/1/

Any help would be appreciated!

Answer 1

You will have to check for unique identifier eg. checkbox value or id.

Example:

Using value <input type="checkbox" value="value1">

$(`#${view.key}.kn-table tbody tr.kn-table-totals td input[value='value1']`).remove();

Using id <input type="checkbox" id="uniqueId">

$(`#${view.key}.kn-table tbody tr.kn-table-totals td input#uniqueId`).remove();

Answer 2

However, my code removes all of the checkboxes

Nope nothing is removed. The checkboxes will never added. This is because you have a typo in your code. The .each() closing bracket ) is missing.

Change

$('#' + view.key + '.kn-table tbody tr.kn-table-totals td input').each(function() {
    $(this).remove()
}

To this instead

$('#' + view.key + '.kn-table tbody tr.kn-table-totals td input').each(function() {
    $(this).remove()
})