Question

I am having issues getting my JQuery Selector to access a particular HTML element.

I have an <h2> tag which I am trying to remove the CSS class from and then add a new one to it based on some user action.

My <h2> CSS is defined as:

html .image_thumb ul li h2 {
    color : #ffffff;
    font-size: 1.5em; 
    margin: 5px 0; padding: 0;
}

My HTML snippet looks like so:

'<div id="div_image_thumb" class="image_thumb">
<ul>
    <li class="LI1">
        <a href="./images/sample1.jpg"></a>
        <div class="block">
            <h2>This is my header</h2>
            <small>Lorem Ipsum Article Titles Running </small>
            <p>Lorem Ipsum Details...<br /><a href="" target="_blank">Read More</a> </p>
        </div>
    </li>

etc…

My JQuery call looks like so:

$("div#div_image_thumb ul .LI1 div h2").removeClass();

but it does not remove the class. Any ideas?

Answer 1

This isn’t your problem, but you need to pass a parameter to removeClass(). Like:

$('#foo').removeClass('active');

Change your CSS to actually assign a class to the h2, like this:

html .image_thumb ul li h2.myClass{ 
    color : #ffffff; 
    font-size: 1.5em; 
    margin: 5px 0; 
    padding: 0; 
}

Change this:

<h2>This is my header</h2>

to this:

<h2 class="myClass">This is my header</h2>

And have jQuery do this:

$("div#div_image_thumb ul .LI1 div h2").removeClass('myClass');

Give that a try – good luck