Question

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> 

Answer 1

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>

​