CODEWITHSUNDEEP
javascriptjqueryaddclassremoveclass
Ed Dias
Ed Dias

Reputation: 185

Remove class added after clicking new button

Need some help. Managed to create a jQuery to change the class of the button after being clicked but I need you to click a new button class is removed from others.

I'm trying but I can not. I've tried some way but whenever I try, I can remove all and clicked the button that was also not with the new class.

Can anyone help me?

$(document).ready(function() {

  $('div#filters-container button').click(function() {

    var id_button = $(this).val();
    $("#" + id_button + "").addClass("cbp-filter-item-active");

  });

});
.cbp-filter-item-active {
  background-color: #5d5d5d;
  color: #fff!important;
  border-color: #5d5d5d
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="filters-container">
  <button value="0" id="0" href="videos2-carrega.asp">Todos</button>
  <button value="1" id="1" href="videos2-carrega.asp?cat=1">Família</button>
  <button value="2" id="2" href="videos2-carrega.asp?cat=2">Finanças</button>
  <button value="3" id="3" href="videos2-carrega.asp?cat=3">Propaganda</button>
  <button value="4" id="4" href="videos2-carrega.asp?cat=4">Empreendedorismo</button>
</div>

Thank you for your attention.

Upvotes: 0

Views: 1541

Answers (4)

Vinita Rathore
Vinita Rathore

Reputation: 550

You can use this : http://jsfiddle.net/620tqr19/

$('button').on('click',function(){
    $('button').removeClass('active');
    $(this).addClass('active');
});

Change class="active" as per requirement.

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82241

You can add class to currently clicked element and remove them from sibling elements:

$('div#filters-container button').click(function() {
    $(this).addClass("cbp-filter-item-active").siblings().removeClass('cbp-filter-item-active');
});

Working Demo

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

$(document).ready(function() {

  var $buttons = $('div#filters-container button').click(function() {

    var $this = $(this).addClass("cbp-filter-item-active");
    $buttons.not($this).removeClass("cbp-filter-item-active");

  });

});
.cbp-filter-item-active {
  background-color: #5d5d5d;
  color: #fff!important;
  border-color: #5d5d5d
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="filters-container">
  <button value="0" id="0" href="videos2-carrega.asp">Todos</button>
  <button value="1" id="1" href="videos2-carrega.asp?cat=1">Família</button>
  <button value="2" id="2" href="videos2-carrega.asp?cat=2">Finanças</button>
  <button value="3" id="3" href="videos2-carrega.asp?cat=3">Propaganda</button>
  <button value="4" id="4" href="videos2-carrega.asp?cat=4">Empreendedorismo</button>
</div>

Upvotes: 0

sinisake
sinisake

Reputation: 11328

$(document).ready(function() {

    $('div#filters-container button').click(function() {

        var id_button = $(this).val();
        $("#"+id_button+"").addClass("cbp-filter-item-active");
        $(this).siblings().removeClass('cbp-filter-item-active'); //added line

    });

});

Added line of code will remove class for the rest of the buttons. DEMO: http://jsfiddle.net/8oytw0ue/2/

Actually, much simpler:

$(document).ready(function() {

    $('div#filters-container button').click(function() {

    $(this).addClass("cbp-filter-item-active");
        $(this).siblings().removeClass('cbp-filter-item-active');

    });

});

you don't need ID to select button $(this) will be ok...

Upvotes: 2

Related Questions