I am using this plugin to add JQuery to a specific page. I am trying to remove a span class. Here is a part of the DOM

 <!--// Header \\-->

                    <div class="careerfy-subheader careerfy-subheader-with-bg"  style="background-image: url('http://www.sohodragontalent.com/wp-content/uploads/subheader-bg.jpg');">
      <span class="careerfy-banner-transparent"  style="background-color: rgba(246,248,250,0.81) !important;"></span>

I am trying to remove the class named "careerfy-banner-transparent" from the parent class "careerfy-subheader careerfy-subheader-with-bg"

This is the JQuery Code that I have written but for some reason it doesn't work.

jQuery(".careerfy-subheader careerfy-subheader-with-bg").removeClass("careerfy-banner-transparent");

Any help on this matter would be greatly appreciated.

closed as off-topic by Michael, Jack Johansson May 16 '18 at 4:25

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.


.careerfy-subheader careerfy-subheader-with-bg is not a valid selector for the element you're trying to remove the class from.

Firstly, to select an element based on two classes you need this syntax:


Notice the . for each class, and that they are attached. This means 'select an element with both these classes'.

The second problem is that this isn't even the element you're trying to remove. The class is on a span element inside the selected element, so your selected element should be:

jQuery('.careerfy-subheader.careerfy-subheader-with-bg .careerfy-banner-transparent')

This selects the element with the class careerfy-banner-transparent inside an element with careerfy-subheader and careerfy-subheader-with-bg classes. Having both classes is unnecessary unless using only one of them will select another element that you don't want to select.

However it seems like you actually want to remove the element, not the class. removeClass will change:

<span class="careerfy-banner-transparent"  style="background-color: rgba(246,248,250,0.81) !important;"></span>


<span style="background-color: rgba(246,248,250,0.81) !important;"></span>

So the span will still be there.

If you want to remove the element entirely you need to select the span element and use remove(), not removeClass():

jQuery('.careerfy-subheader.careerfy-subheader-with-bg .careerfy-banner-transparent').remove();
  • Thank you so much for your answer taking the time to give a detailed explanation! It was really helpful! – user3402248 May 16 '18 at 15:39

Not the answer you're looking for? Browse other questions tagged or ask your own question.