JSFiddle - React, Tailwind, and code Playground

by SUNGMIN SHIN

HTML

<button data-class="border">border</button>
<button data-class="bg">bg</button>
<button data-class="font">font</button>
<button data-class="align">align</button>
<br>
<br>

<div id="wrap" class="border bg font align">
  hello
</div>

CSS

#wrap{width:200px;height:200px;}
#wrap.border{border:1px solid red}
#wrap.bg{background:gray}
#wrap.font{font-size:60px}
#wrap.align{text-align:center;}

JavaScript 1.7

$('button').on('click', function(){
  var $targetEle = $('#wrap');
  var className = $(this).attr('data-class');
  
  console.log(className);
  $targetEle.removeClass(className);
})