CODEWITHSUNDEEP
jqueryremoveclassparents
Leon Gaban
Leon Gaban

Reputation: 39018

How to target and remove class from a sibling element?

So if you click on the Red class it should remove the blue_on and green_on classes (if they are being used) form the Blue and Green buttons.

<div id="dashboard-menu">
    <div id="red" class="red_on">Red</div>
    <div id="blue" class="blue_off">Blue</div>
    <div id="green" class="green_off">Green</div>
</div>

My codepen, where I'm trying to replicate my problem in a smaller area: http://codepen.io/leongaban/pen/vzolu

My real code for reference

<div id="dashboard-menu">
    <div id="dash-btn" class="dashboard-button-on">
        <div class="icon"></div>
        <span>Dashboard</span>
    </div>

    <div id="dash-btn" class="affiliate-button-off">
    <span>Affiliate Search</span>
    </div>

    <div id="dash-btn" class="wishlist-button-off">
    <div class="icon"></div>
    <div class="count">3</div>
    </div>
</div>

Upvotes: 1

Views: 3323

Answers (3)

PSL
PSL

Reputation: 123739

You could write something generic like this:

With this you don't need to create a click handler for each id's individually and probably you can just get rid of the ids and multiple handlers based on each id with redundant code.

    var dash = {
    menu_red: true,
    menu_blue: false,
    menu_green: false
};


$(document).ready(function () {
    // Main function
    $(function () {
        $('#dashboard-menu > div').on('click', function () {
            $(this).removeClass(this.id + "_off").addClass(this.id + "_on"); // For the clicked item remove the off class and add the on class
            dash["menu_" + this.id] = true; // set the property to true.
            $(this).siblings().removeClass(function () { //use remove class on siblings
                dash["menu_" + this.id] = false; //set the property to false
                return this.id + "_on"; //get the on class to be removed
            }).addClass(function () {

                return this.id + "_off"; //get the offclass to be removed
            });
           console.log(dash)
        });
    });
});

Fiddle

As others mentioned if you use just one class for on state you could simplify a lot like this:

$(document).ready(function () {
    // Main function
    $(function () {
        $('#dashboard-menu > div').on('click', function () {
            $(this).addClass("on");

            dash["menu_" + this.id] = true;

            $(this).siblings('.on').removeClass(function () {
                dash["menu_" + this.id] = false;
                return "on";
            });

           console.log(dash)
        });
    });
});

and arrange your css like this:

.red, .blue, .green {
    color: #ccc;
    background: #666;
}
.red.on {
    background: red;
}
.blue.on {
    background: blue;
}
.green.on {
    background: green;
}

Fiddle

Upvotes: 1

Kylie
Kylie

Reputation: 11749

I simplified your code pen considerably....

http://codepen.io/anon/pen/yaJxD

Heres your complete javascript, instead of all those if/then statements you had......

  $('.but').click(function() {
    var color = $(this).attr('id');
    $('.but').css('background','#666');
    $(this).css('background',color);
  });

Just change your html to .... cuz you already have the id as the color....if you're not gonna have the id as the color, just add a data-color attribute, and change var color = $(this).data('color') instead

<div id="dashboard-menu">
 <div id="red" class="but on">Red</div>
 <div id="blue" class="but off">Blue</div>
 <div id="green" class="but off">Green</div>
</div>

Upvotes: 1

Blazemonger
Blazemonger

Reputation: 92893

$(this).siblings().removeClass('blue_on green_on');

http://api.jquery.com/removeClass

However, depending on what you're trying to accomplish, a better approach might be to take advantage of multiple (space-separated) classes:

<div id="dashboard-menu">
    <div class="red on">Red</div>
    <div class="blue">Blue</div>
    <div class="green">Green</div>
</div>

JS:

$(this).addClass('on').siblings().removeClass('on'); // radio-button behavior

Upvotes: 5

Related Questions