Not able to remove a class from an element using JQuery [closed]

.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:

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

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>

into:

<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();