Remove entire table row having checkbox which was unchecked , when user click on submit button

Question

I have table with checkall/uncheckall check box functionality and table is having and some input fields like text boxes, dropdowns. User should select at least one checkbox for processing the data in the table. That is working fine. For example table is having 3 rows and user select any one checkbox and click on submit button then remaining two table rows should be removed and not being submitted. I tried with the below one .

$("input:not(:checked)").each(function () {
      $('input:not(:checked)').closest('tr').remove();
});

But this one is removing entire table. So I need only those table rows which are unchecked should be removed. Any help would be greatly appreaciated.

can you create working demo code ? – Swati Oct 01 '20 at 09:35 — Swati, Oct 01 '20 at 09:35
@Swati, hrere is the fiddle https://jsfiddle.net/1u45q97x/ – user3408779 Oct 01 '20 at 10:19 — user3408779, Oct 01 '20 at 10:19

PotatoesFall · Answer 1 · 2020-10-01T12:02:46.943

It seems to be working fine for me: https://jsfiddle.net/r9zgvbqu/7/

Two comments, you are using the .each() function to do something for all elements selected by "input:not:(:checked)", but in that function selecting everything again. so you are just doing the same thing multiple times. You can skip that step, and also skip the .each()-$(this) combination that has been suggested, by straightup doing:

$("input:not(:checked)").closest('tr').remove();

This removes all the you want.

EDIT: Your problem is that you are selecting all non-checked inputs, including text inputs etc. You can specify the type of input you are selection: input[type=checkbox]:not(:checked)

In general, I would avoid selecting elements by their tag name. It's better to give the relevant checkboxes a class, and you can select them by class.

Here is a fixed version of your fiddle: https://jsfiddle.net/927sdh8n/

And here is a simpler and safer version using classes: https://jsfiddle.net/qz53wfxc/

Thanks for your answer. But some how it is also removing all table rows from the table — user3408779, Oct 01 '20 at 09:28
Here the fiddle I have created. https://jsfiddle.net/1u45q97x/ — user3408779, Oct 01 '20 at 10:21
Your table contains more inputs, which are all not checked (since they are not checkboxes). try input[type=checkbox]. I will edit my answer. — PotatoesFall, Oct 01 '20 at 11:58

RJCoder · Answer 2 · 2020-10-01T10:09:19.030

1

Assuming you don't use <th></th>, your header row also got selected because that checkbox is also unchecked. May be that will be the reason all rows got deleted. Console input:not:(:checked) it . It will give clear idea.

Edit: Then try this, may be this will work

$('#tableid').find('tr[input:not:(:checked)]').each(function()
{
      $(this).remove();
}

edited Oct 01 '20 at 10:09

answered Oct 01 '20 at 09:55

RJCoder

53
9

No, I am using this line is eniterly removing table `$('input:not(:checked)').closest('tr').remove();` – user3408779 Oct 01 '20 at 09:59
this one is removing table data except table heading `$('input:not(:checked)').parent('tr').remove();` – user3408779 Oct 01 '20 at 10:01

Remove entire table row having checkbox which was unchecked , when user click on submit button

2 Answers2