Live Demo: How to add or remove class in JavaScript when click on button

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.mystyle {
  padding: 30px;
  margin:5px;
  background-color: red;
  color:white;
  border: 1px solid green;
  font-size: 20px;
}
</style>
</head>
<body>
<p>Click the "Clickme" button to remove the "mystyle" class from the DIV element:</p>

<button onclick="callFunction()">clickme</button>

<div id="mydiv">
Apply CSS on div tag which contain id myDiV.
</div>

<script>
function callFunction() {
  var element = document.getElementById("mydiv");
   if (element.classList.contains("mystyle")) {
        element.classList.remove("mystyle");
   } 
  else {
	element.classList.add("mystyle");
   } 
} 
</script>
</body>
</html>