Example to show how to add / remove CSS class dynamically with jQuery.

jQuery comes with addClass() and removeClass() to add or remove CSS class dynamically.

  • $(‘#paragraph1’).addClass(‘highlightYellow’); – Add a "highlightYellow" css class to elements that contain id of "paragraph1".
  • $(‘#paragraph1’).removeClass(‘highlightYellow’); – Remove a "highlightYellow" css class from elements that contain id of "paragraph1".
<style type="text/css">
.highlightYellow {
<script type="text/javascript"
<h1>jQuery add / remove css class example</h1>
<p id="paragraph1">This is paragraph 1</p>
<p>This is paragraph 2</p>
<p>This is paragraph 3</p>
<p>This is paragraph 4</p>  
<button id="addClass">Add highlightYellow</button>
<button id="removeClass">Remove highlightYellow</button>  
<script type="text/javascript">
  $("#addClass").click(function () {

  $("#removeClass").click(function () {

jQuery add / remove css class example

This is paragraph 1

This is paragraph 2

This is paragraph 3

This is paragraph 4