Remove CSS Class with JQuery

Question

I have a nested div that gets loaded using PHP include. It gets to put two places, each inside a different parent div.

<div id="parent_div">
    <div id="contact_details_div" class="contact_details_div sameheight">
        <h3>Some Text</h3>
        Some additional Text    
    </div>
    <div id="contact_div" class="contact_div sameheight">
        Even more text
    </div>
</div>

The parent div can be one of two different ID's.

How, using jQuery or just Javascript, can I remove the class 'sameheight' when the parent div is a specific ID name?

This works but removes it from BOTH parent divs.

$( "#contact_details_div" ).removeClass( "sameheight" )
$( "#contact_div" ).removeClass( "sameheight" )

I'm guessing I need an IF statement but, not sure how to write it.

It sounds like you end up with HTML code where mutiple elements have the same id? That's not supposed to be the case, ever, and fixing that will also solve your problem. Remove the ids, and you can do $('#parent_div .contact_details_div') to select a specific element as opposed to all of them. — user5734311
– user5734311, Commented Sep 10, 2018 at 21:50

Jason bamber · Accepted Answer · 2018-09-10 21:49:48Z

1

Well, jquery selectors work like css, so you can use a parent child selector: (The following presumes you want the class applied when in #parent_two but not #parent_one:

$( "#parent_one #contact_details_div" ).removeClass( "sameheight" );

However, if the sameheight class is only being used to apply css styles, then it would make more sense to make your css more specific, so it only applies when its a child of the other div:

#parent_two .sameheight{...}

Then you want need the javascript

edited Sep 10, 2018 at 21:49

answered Sep 10, 2018 at 21:46

Jason bamber

4592 silver badges7 bronze badges

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

8 Comments

user5734311 Over a year ago

#contact_details_div is supposed to be unique, so while this is true, it should never be necessary to chain two ids in a selector.

Rick Over a year ago

Perfect, just what I needed!

Rick Over a year ago

@Chris, each ID only appears on a page once. PHP loads them using an Include either in a sidebar, or on a page without a sidebar, so it should still be unique IDs.

Jason bamber Over a year ago

@ChrisG certainly ids should be unique per page, and i personally never use ids for styling (BEM all the way), but what i imagine is happening here, is this pice of javascript is loaded globally, and #contact_details_div can appear in many different contexts

Rick Over a year ago

My final JS looks like this: $( "#contact_form_sidebar .contact_details_div" ).removeClass( "sameheight" ) $( "#contact_form_sidebar .contact_div" ).removeClass( "sameheight" )

|

Collectives™ on Stack Overflow

Remove CSS Class with JQuery

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related