CODEWITHSUNDEEP
jquery
user1502434
user1502434

Reputation: 97

Removing class from html elements

On a click event of Button 1 how can I remove the class 'selected' from only this section. The classes of Button 2 should not be removed and the same goes for Button 2, if I click button 2, the classes of Button 1 should not be removed if the class selected exists. I know $('.small-button-1, .small-button-2').removeClass('selected'); removes everything.

<div class="block">
    <div id="abcd" class="lg_button">Button 1</div>
    <div>
        <div class="small-button-1 selected">1</div>
        <div class="small-button-2 selected">2</div>
    </div>
</div> 

<div class="block">
    <div id="dcba" class="lg_button">Button 2</div>
    <div>
        <div class="small-button-1 selected">1</div>
        <div class="small-button-2 selected">2</div>
    </div>
</div>

Upvotes: 0

Views: 84

Answers (2)

TommyBs
TommyBs

Reputation: 9648

I believe you need to get hold of the parent element and then use that as the context of your selector. Something like this http://jsfiddle.net/VY5Md/ should achieve what you're asking for I think

  $(function(){
       $('.lg_button').click(function(){
           var $p = $(this).parents('.block');
           $('.selected', $p).removeClass('selected'); 
       }); 
  });​

This code gets the button that was clicked, finds the parent with class "block" and then removes the class "selected" from anything with the class "selected" within the context of that "block"

Upvotes: 0

rsz
rsz

Reputation: 1161

I have made it like this but had to rename some html tags to get it working here is my example http://jsfiddle.net/fKwGR/

The jquery part:

$(document).ready(function() {
$('div.lg_button1').click(function(){
        $('div.small-button-1.selected').attr('class','small-button-1');
        $('div.small-button-2.selected').attr('class','small-button-2');
        $('div.small-button-3').attr('class','small-button-3 selected');
        $('div.small-button-4').attr('class','small-button-4 selected');
        });
$('div.lg_button2').click(function(){
        $('div.small-button-1').attr('class','small-button-1 selected');
        $('div.small-button-2').attr('class','small-button-2 selected');
        $('div.small-button-3.selected').attr('class','small-button-3');
        $('div.small-button-4.selected').attr('class','small-button-4');
        });
});​

HTML part:

<div class="block">
  <div id="abcd" class="lg_button1">Button 1</div>
  <div id='button1'>
      <div class="small-button-1 selected">1</div>
      <div class="small-button-2 selected">2</div>
  </div>


<div class="block">
  <div id="dcba" class="lg_button2">Button 2</div>
  <div id='button2'>
      <div class="small-button-3 selected">1</div>
      <div class="small-button-4 selected">2</div>
  </div>

​

Upvotes: 1

Related Questions