JQuery h2 selector issue

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 snipped 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

seems like an unnecessarily long selector, try

$(".block > h2").removeClass();

and yeah, jimyi is right, your h2 doesnt have a class attribute in the snippet you posted

Answer 2

Which class are you trying to remove?

The h2 has no classes associated with it to begin with.

Maybe change your css line apply those styles via some class, and add that class to the h2 in the HTML source?

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

Then:

<div id="div_image_thumb" class="image_thumb">
<ul>
        <li class="LI1">
                <a href="./images/sample1.jpg"></a>
                <div class="block">
                        <h2 class="startclass">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>

Answer 3

try

$("#div_image_thumb div.block > h2").removeClass();

I'll reiterate what everyone else has already said - that <h2> element does not have a class attribute defined.

Answer 4

You're trying to remove a class that isn't actually assigned to your H2.

The css properties are defined for <h2> elements in a particular location, but there's no actual class name defined there. Your better option is to use the jQuery.css() method and set individual style properties.

Alternatively, you should use jQuery.addClass and assign a group of styles to your H2 element that override the defaults.

Answer 5

Your selector is incorrect. Try

div#div_image_thumb ul li.LI1 div h2

I would recommend simplifying it waaaay down though. Why not just

".li1 h2"

Answer 6

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