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

2020-10-01 09:35:43 +00:00
Commented Oct 1, 2020 at 9:35 — Swati
– Swati, Commented Oct 1, 2020 at 9:35
@Swati, hrere is the fiddle jsfiddle.net/1u45q97x

user3408779
– user3408779

2020-10-01 10:19:53 +00:00
Commented Oct 1, 2020 at 10:19 — user3408779
– user3408779, Commented Oct 1, 2020 at 10:19

RJCoder · Accepted Answer · 2020-10-01 10:09:19Z

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 1, 2020 at 10:09

answered Oct 1, 2020 at 9:55

RJCoder

5313 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3408779 Over a year ago

No, I am using <th></th> this line is eniterly removing table $('input:not(:checked)').closest('tr').remove();

user3408779 Over a year ago

this one is removing table data except table heading $('input:not(:checked)').parent('tr').remove();

PotatoesFall · Accepted Answer · 2020-10-01 12:02:46Z

1

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/

edited Oct 1, 2020 at 12:02

answered Oct 1, 2020 at 9:13

PotatoesFall

3552 silver badges7 bronze badges

3 Comments

user3408779 Over a year ago

Thanks for your answer. But some how it is also removing all table rows from the table

user3408779 Over a year ago

Here the fiddle I have created. jsfiddle.net/1u45q97x

PotatoesFall Over a year ago

Your table contains more inputs, which are all not checked (since they are not checkboxes). try input[type=checkbox]. I will edit my answer.

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related