1

I am trying to remove a .hideme class from list which has a certain ID - the click event is in another list. Depending on which UL.tab you click, the corresponding ul.lineup class .hideme is show or removed. HTML looks like this:

    <ul class="tab">
        <li id="0">
            <a href="#">26/08/2011</a>
        </li>
        <li id="1">
            <a href="#">27/08/2011</a>
        </li>
        <li id="2">
            <a href="#">28/08/2011</a>
        </li>
    </ul>

    <ul id="0" class="lineup hideme">
       <li>...</li>
    </ul>

    <ul id="1" class="lineup hideme">
       <li>...</li>
    </ul>

    <ul id="3" class="lineup hideme">
       <li>...</li>
    </ul>
Eli
  • 14,779
  • 5
  • 59
  • 77
  • What jQuery code do you have at the moment? What things did you try? – Veger Aug 10 '11 at 15:57
  • just in case, you can't use numbers to begin the name of IDs/classes, just saying – leopic Aug 10 '11 at 15:58
  • 3
    You have multiple elements with the same `id`: this is not allowed, and is invalid. The `id` ***must be unique within the document***. – David Thomas Aug 10 '11 at 15:59
  • wait a second... you can't have two elements with the same id on the same page. – Joseph Marikle Aug 10 '11 at 15:59
  • 1
    It's pretty easy but currently your HTML is invalid because you have non-unique IDs. the jQuery needed won't work until you fix that – Cfreak Aug 10 '11 at 15:59
  • 1
    @Leopic, in html5 you can start an `id` with a numeric character, among others. (though there's no indication if the posted code is any particular version of html). – David Thomas Aug 10 '11 at 16:00
  • AHHH - Class/ID starting with a number - school boy error! Thanks guys. –  Aug 10 '11 at 16:05

7 Answers7

6

First fix some HTML/CSS errors. ID values in HTML/CSS cannot start with a number. Also, please note that there can only be one object in an entire page with a given id value. You have duplicates. That will not work. You will have to fix both of these before any selector operations using these IDs will be reliable.

If you have an ID and you want to remove a class from that particular object, you would use this:

$("#myID").removeClass("classToRemove");

If you're trying to remove the class from all descendants of that ID, you can use this:

$("#myID .classToRemove").removeClass("classToRemove");

That will create a selector object which has all descendants of myID that have the classToRemove and then remove it from each of them.

jfriend00
  • 683,504
  • 96
  • 985
  • 979
1

You can remove the ids and simply rely on the index of the elements:

$('.tab li a').click(
    function(){
        i = $(this).closest('li').index();
        $('ul.lineup').eq(i).toggleClass('hideme');
        return false;
    });

JS Fiddle demo.

References:

David Thomas
  • 249,100
  • 51
  • 377
  • 410
  • Cheers! This works.. but is it better than @jfriend00 answer? (complete school boy error when i was trying to add numbers to ID and class names) –  Aug 10 '11 at 16:20
0
$("#certainId").removeClass("className");

There are also two things wrong about the code you showed above:

  1. You should not have more than one specific Id on a page. For example, having two id's of #foo would be invalid HTML.

  2. Id's and classes should not start with numbers.

Shaz
  • 15,637
  • 3
  • 41
  • 59
0

Try:

$("ul.tab > li > a").click(function ()
{
    $("ul#" + $(this).parent().attr('id')).removeClass("hideme");
}

Also, as Shaz noted you cannot have duplicate ID's, or ID's that start with a number.

Andrew Lee
  • 2,543
  • 3
  • 20
  • 31
0

this method can help you, but you should consider that id should be unique.

$('ul.tab a').click(function(){
   $('ul#'+this.parent().attr('id')).toggleClass('hideme');
});
Senad Meškin
  • 13,597
  • 4
  • 37
  • 55
0
<ul class="tab">
    <li id="li_c0">
        <a href="#">26/08/2011</a>
    </li>
    <li id="li_c1">
        <a href="#">27/08/2011</a>
    </li>
    <li id="li_c2">
        <a href="#">28/08/2011</a>
    </li>
</ul>

<ul class="lineup hideme c1">
   <li>...</li>
</ul>

<ul class="lineup hideme c2">
   <li>...</li>
</ul>

<ul class="lineup hideme c3">
   <li>...</li>
</ul>



$("ul.tab li a").click(function(){

    $(".hideme").hide();
    $(".hideme." + this.parentNode.id.split("_")[1]).show();

});

That's how I'd do it.

http://jsfiddle.net/RVtYe/

Joseph Marikle
  • 76,418
  • 17
  • 112
  • 129
-1

Try this, as a side note the ids should never start with a number.

$("ul.tab a").click(function ()
{
    $("#" + $(this).parent().attr('id')).removeClass("hideme");
});
ShankarSangoli
  • 69,612
  • 13
  • 93
  • 124
  • This will affect more than just the desired element and if any kind of nesting were to be considered, this could cause a cascading effect. The select needs limited if anything, but it would be better not to even try using multiple identical ids. – Joseph Marikle Aug 10 '11 at 16:25
  • @Joseph - Are you talking about this `$("#" + $(this).parent().attr('id'))? – ShankarSangoli Aug 10 '11 at 17:21
  • @Joseph - We should always ensure that the element ids are uniques on the page. Looking at the markup OP provided my answer is perfect. If not upvote please remove my down vote. – ShankarSangoli Aug 10 '11 at 17:23
  • I'll remove my vote. The whole question is a mess imo because of the malformed HTML that was posted. In order for me to remove my vote, the question must be edited. After you do so, @Joseph me and I'll remove my vote. (pfft... what ever... its' an `@`) – Joseph Marikle Aug 10 '11 at 18:10