CODEWITHSUNDEEP
javascripthtmljquerycss
benyo
benyo

Reputation: 73

jQuery remove previously applied css style on button click

How can I remove the previously applied background-color on the clicked button(s) if I click to another button? With this code, it's applying the clicked button's hover background color as I want it, but I can't reset/remove the applied styles if I click on the another button(s).

$("button").each(function(){
    var $this = $(this);
    $this.click(function(e) {
        e.preventDefault();
        var color = $this.css('background-color');
        $this.css({'background-color': color, 'color': '#ffffff'});
    })
});
.btn {
  border: 2px solid black;
  background-color: white;
  color: black;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
}

.success {
  border-color: #04AA6D;
  color: green;
}

.success:hover {
  background-color: #04AA6D;
  color: white;
}

.info {
  border-color: #2196F3;
  color: dodgerblue;
}

.info:hover {
  background: #2196F3;
  color: white;
}

.warning {
  border-color: #ff9800;
  color: orange;
}

.warning:hover {
  background: #ff9800;
  color: white;
}

.danger {
  border-color: #f44336;
  color: red;
}

.danger:hover {
  background: #f44336;
  color: white;
}

.default {
  border-color: #e7e7e7;
  color: black;
}

.default:hover {
  background: #e7e7e7;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<button class="btn success">Test</button>
<button class="btn info">Test 1</button>
<button class="btn warning">Test 2</button>
<button class="btn danger">Test 3</button>
<button class="btn default">Test 4</button>
</body>
</html>

Upvotes: 2

Views: 408

Answers (3)

Idrizi.A
Idrizi.A

Reputation: 12010

You're doing this the wrong way, you cannot rely on the hover color to set the active color. If I use the keyboard to navigate the buttons and click them using Enter, then the background-color is not applied.

A better solution would be to add an active class with jQuery and then modify the color of the button using CSS when it's active.

Try:

$("button").each(function(){
    var $this = $(this);
    
    $this.click(function(e) {
        // reset class of active buttons, if needed
        $("button.active").removeClass('active');

        e.preventDefault();
        $this.toggleClass('active')
    })
});
.btn {
  border: 2px solid black;
  background-color: white;
  color: black;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
}

.success {
  border-color: #04AA6D;
  color: green;
}

.success:hover, .success.active {
  background-color: #04AA6D;
  color: white;
}

.info {
  border-color: #2196F3;
  color: dodgerblue;
}

.info:hover, .info.active {
  background: #2196F3;
  color: white;
}

.warning {
  border-color: #ff9800;
  color: orange;
}

.warning:hover, .warning.active {
  background: #ff9800;
  color: white;
}

.danger {
  border-color: #f44336;
  color: red;
}

.danger:hover, .danger.active {
  background: #f44336;
  color: white;
}

.default {
  border-color: #e7e7e7;
  color: black;
}

.default:hover, .default.active {
  background: #e7e7e7;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<button class="btn success">Test</button>
<button class="btn info">Test 1</button>
<button class="btn warning">Test 2</button>
<button class="btn danger">Test 3</button>
<button class="btn default">Test 4</button>
</body>
</html>

Upvotes: 1

Gianluca Musa
Gianluca Musa

Reputation: 805

var lastColor = null;
var lastBtn = null;
$("button").each(function(){
    var $this = $(this);
    $this.click(function(e) {
        e.preventDefault();

        if (lastBtn != null){
           lastBtn.css({ 'background-color' : '', 'color': lastColor });         
        } 
        lastBtn = $this;    
        lastColor = $this.css('background-color');
        var color = $this.css('background-color');
        $this.css({'background-color': color, 'color': '#ffffff'});
    })
});
.btn {
  border: 2px solid black;
  background-color: white;
  color: black;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
}

.success {
  border-color: #04AA6D;
  color: green;
}

.success:hover {
  background-color: #04AA6D;
  color: white;
}

.info {
  border-color: #2196F3;
  color: dodgerblue;
}

.info:hover {
  background: #2196F3;
  color: white;
}

.warning {
  border-color: #ff9800;
  color: orange;
}

.warning:hover {
  background: #ff9800;
  color: white;
}

.danger {
  border-color: #f44336;
  color: red;
}

.danger:hover {
  background: #f44336;
  color: white;
}

.default {
  border-color: #e7e7e7;
  color: black;
}

.default:hover {
  background: #e7e7e7;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<button class="btn success">Test</button>
<button class="btn info">Test 1</button>
<button class="btn warning">Test 2</button>
<button class="btn danger">Test 3</button>
<button class="btn default">Test 4</button>
</body>
</html>

Upvotes: 0

Ryan Wilson
Ryan Wilson

Reputation: 10765

You could do this with pure CSS, adding focus in addition to hover in your CSS to apply the color:

.btn {
  border: 2px solid black;
  background-color: white;
  color: black;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
}

.success {
  border-color: #04AA6D;
  color: green;
}

.success:hover,
.success:focus {
  background-color: #04AA6D;
  color: white;
}

.info {
  border-color: #2196F3;
  color: dodgerblue;
}

.info:hover,
.info:focus {
  background: #2196F3;
  color: white;
}

.warning {
  border-color: #ff9800;
  color: orange;
}

.warning:hover,
.warning:focus {
  background: #ff9800;
  color: white;
}

.danger {
  border-color: #f44336;
  color: red;
}

.danger:hover,
.danger:focus  {
  background: #f44336;
  color: white;
}

.default {
  border-color: #e7e7e7;
  color: black;
}

.default:hover,
.default:focus {
  background: #e7e7e7;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<button class="btn success">Test</button>
<button class="btn info">Test 1</button>
<button class="btn warning">Test 2</button>
<button class="btn danger">Test 3</button>
<button class="btn default">Test 4</button>
</body>
</html>

Upvotes: 0

Related Questions