Remove click with Jquery after clicking another element

Question

Every time I click on label that’s inside flags he must apply a background-color. It’s working. What happens is that when I click on a div, it applies the background correctly, but when I click on another, I want it to remove the background-color from the previous div and leave it applied only to the current one.

$('.bandeiras label').click(function() {
  $(this).css('background-color', '#8a8383');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bandeiras cf">
  <label for="codigoBandeiraV" class="cc-radio" style="background-color: rgb(138, 131, 131);">
  <input type="radio" id="codigoBandeiraV" name="codigoBandeira" value="visa">
  <img src="/assets/images/cartoes/visa.png" alt="Visa" title="Visa" align="absmiddle"></label>
  <label for="codigoBandeiraM" class="cc-radio" style="background-color: rgb(138, 131, 131);">
  <input type="radio" id="codigoBandeiraM" name="codigoBandeira" value="master"><img src="/assets/images/cartoes/mastercard.png" alt="MasterCard" title="MasterCard" align="absmiddle"></label>
  <label for="codigoBandeiraDin" class="cc-radio" style="background-color: rgb(138, 131, 131);"><input type="radio" id="codigoBandeiraDin" name="codigoBandeira" value="diners"><img src="/assets/images/cartoes/dinners.png" alt="Diners" title="Diners" align="absmiddle"></label>
  <label for="codigoBandeiraE" class="cc-radio" style="background-color: rgb(138, 131, 131);"><input type="radio" id="codigoBandeiraE" name="codigoBandeira" value="elo""><img src="/assets/images/cartoes/elo.png" alt="Elo" title="Elo" align="absmiddle"></label>
</div>

Answer 1

You can change the background-color of all elements at once with the default value before applying the new color to the clicked element:

$('.bandeiras label').click(function() {
   $('.bandeiras label').css("background-color", "rgb(138, 131, 131)");
   $(this).css('background-color', 'red');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bandeiras cf">
  <label for="codigoBandeiraV" class="cc-radio" style="background-color: rgb(138, 131, 131);">
  <input type="radio" id="codigoBandeiraV" name="codigoBandeira" value="visa">
  <img src="/assets/images/cartoes/visa.png" alt="Visa" title="Visa" align="absmiddle"></label>
  <label for="codigoBandeiraM" class="cc-radio" style="background-color: rgb(138, 131, 131);">
  <input type="radio" id="codigoBandeiraM" name="codigoBandeira" value="master"><img src="/assets/images/cartoes/mastercard.png" alt="MasterCard" title="MasterCard" align="absmiddle"></label>
  <label for="codigoBandeiraDin" class="cc-radio" style="background-color: rgb(138, 131, 131);"><input type="radio" id="codigoBandeiraDin" name="codigoBandeira" value="diners"><img src="/assets/images/cartoes/dinners.png" alt="Diners" title="Diners" align="absmiddle"></label>
  <label for="codigoBandeiraE" class="cc-radio" style="background-color: rgb(138, 131, 131);"><input type="radio" id="codigoBandeiraE" name="codigoBandeira" value="elo"><img src="/assets/images/cartoes/elo.png" alt="Elo" title="Elo" align="absmiddle"></label>
</div>

Automatically picking up the original color

var cor_padrao;
$('.bandeiras label').click(function(){
   cor_padrao = cor_padrao || $(this).css("background-color");
   $('.bandeiras label').css("background-color", cor_padrao);
   $(this).css('background-color', 'red');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bandeiras cf">
  <label for="codigoBandeiraV" class="cc-radio" style="background-color: rgb(138, 131, 131);">
  <input type="radio" id="codigoBandeiraV" name="codigoBandeira" value="visa">
  <img src="/assets/images/cartoes/visa.png" alt="Visa" title="Visa" align="absmiddle"></label>
  <label for="codigoBandeiraM" class="cc-radio" style="background-color: rgb(138, 131, 131);">
  <input type="radio" id="codigoBandeiraM" name="codigoBandeira" value="master"><img src="/assets/images/cartoes/mastercard.png" alt="MasterCard" title="MasterCard" align="absmiddle"></label>
  <label for="codigoBandeiraDin" class="cc-radio" style="background-color: rgb(138, 131, 131);"><input type="radio" id="codigoBandeiraDin" name="codigoBandeira" value="diners"><img src="/assets/images/cartoes/dinners.png" alt="Diners" title="Diners" align="absmiddle"></label>
  <label for="codigoBandeiraE" class="cc-radio" style="background-color: rgb(138, 131, 131);"><input type="radio" id="codigoBandeiraE" name="codigoBandeira" value="elo"><img src="/assets/images/cartoes/elo.png" alt="Elo" title="Elo" align="absmiddle"></label>
</div>

Answer 2

You can use jQuery siblings for this. When vc adds a css in a vc it removes the siblings' css.

$('.bandeiras label').click(function() {
  $(this).css('background-color', '#f00').siblings().css('background-color', '#8a8383');
});

<script src="https://code.jquery.com/jquery-3.2.1.min.js "></script>

<div class="bandeiras cf">
    <label for="codigoBandeiraV" class="cc-radio" style="background-color: rgb(138, 131, 131);">
        <input type="radio" id="codigoBandeiraV" name="codigoBandeira" value="visa">
        <img src="/assets/images/cartoes/visa.png" alt="Visa" title="Visa" align="absmiddle">
    </label>
    <label for="codigoBandeiraM" class="cc-radio" style="background-color: rgb(138, 131, 131);">
        <input type="radio" id="codigoBandeiraM" name="codigoBandeira" value="master">
        <img src="/assets/images/cartoes/mastercard.png" alt="MasterCard" title="MasterCard" align="absmiddle">
    </label>
    <label for="codigoBandeiraDin" class="cc-radio" style="background-color: rgb(138, 131, 131);">
        <input type="radio" id="codigoBandeiraDin" name="codigoBandeira" value="diners">
        <img src="/assets/images/cartoes/dinners.png" alt="Diners" title="Diners" align="absmiddle">
    </label>
    <label for="codigoBandeiraE" class="cc-radio" style="background-color: rgb(138, 131, 131);">
        <input type="radio" id="codigoBandeiraE" name="codigoBandeira" value="elo">
        <img src="/assets/images/cartoes/elo.png" alt="Elo " title="Elo" align="absmiddle">
    </label>
</div>