jQuery select input elements in a target form with a certain class

Question

I have several forms in one page, and I wanted to target all input fields in a target form (form ID) that has a certain class in it (Eg."has-error" ).

I though this would do the trick:

target_elem = "#form_b";
$(target_elem + ":input").hasClass("has-error").removeClass("has-error");

No luck so far. I've tried playing w/ filtering as well. tsk

What do you think #form_b:input will select? And what will hasClass return? Did you read the documentation at all? api.jquery.com/hasclass — Felix Kling
– Felix Kling, Commented Jun 17, 2014 at 7:49

Shaunak D · Accepted Answer · 2014-06-17 08:01:05Z

3

Demo

Simply Use .class selector:

$(target_elem + " input.has-error").removeClass("has-error");

edited Jun 17, 2014 at 8:01

answered Jun 17, 2014 at 7:53

Shaunak D

20.7k10 gold badges48 silver badges79 bronze badges

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

4 Comments

Pete_Gore Over a year ago

The best ; even if I'm don't know if the class selector is really useful. We could apply removeClass to all inputs in the target element also... Wonder which solution is the fastest.

Shaunak D Over a year ago

Instead of finding/searching for all inputs in the DOM this would only search for those input with the given class

Pete_Gore Over a year ago

Yes but the target_elem is already an ID, so the search won't by in the entire DOM. For a small number of input to update, I should be faster not to search by class.

BrownChiLD Over a year ago

This was a very elegant solution. thanks pete. and thanks all for participating.

zafus_coder · Accepted Answer · 2014-06-17 08:04:32Z

0

Try this , Let me know if it helps :

  $(".has-error").each(function(){
    $(this).removeClass("has-error");


  });

Live example : http://jsbin.com/yudaseqe/1/edit

answered Jun 17, 2014 at 8:04

zafus_coder

4,6312 gold badges14 silver badges13 bronze badges

Comments

Pete_Gore · Accepted Answer · 2014-06-17 07:48:32Z

-1

No need to use ':' $(target_elem + " input").hasClass("has-error").removeClass("has-error"); should work

Note that you also can forget about hasClass("has-error") It will take more time to find input with this class than deleting this class of every input without checking if it exists.

target_elem = "#form_b";
$(target_elem + " input").removeClass("has-error");

answered Jun 17, 2014 at 7:48

Pete_Gore

6441 gold badge6 silver badges21 bronze badges

Comments

K.K.Agarwal · Accepted Answer · 2014-06-17 08:02:02Z

-1

try this...

$("input[class*='has-error']",$(target_elem)).removeClass("has-error");

Or use this

$("input.has-error",$(target_elem)).removeClass("has-error");

edited Jun 17, 2014 at 8:02

answered Jun 17, 2014 at 7:53

K.K.Agarwal

8565 silver badges10 bronze badges

1 Comment

Pete_Gore Over a year ago

Performances of *= are really bad compared to the class selector !

Collectives™ on Stack Overflow

jQuery select input elements in a target form with a certain class

4 Answers 4

4 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related