May 27, 2022 HTML

jQuery remove previously applied css style on button click

Issue

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>

Solution

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>

Answered By – Gianluca Musa

Answer Checked By – Cary Denson (AngularFixing Admin)

Leave a Reply Cancel reply