\r\n<div class="centered rectangled greened">\r\n This is the second div\r\n<\/div>\r\n<\/pre>\nAnd of course implement a new style class<\/p>\n
.greened {\r\n\tbackground: green;\r\n}\r\n<\/pre>\nThe Javascript function changeSomething()<\/code> will now contain another piece of code<\/p>\n$(\".centered\").removeClass(\"centered\");\r\n<\/pre>\nAfter implementing these changes and reloading the page you will see that both divs move to the left side of the window after button click.<\/p>\n
5. Toggling<\/h3>\n
In some cases we don’t need to add or remove different style classes but just one single class. JQuery allows us to use toggleClass<\/code> method. It’s pretty useful because you don’t have to care if the class is present or not. Let’s create a little checkbox. In HTML we’ll need two nested divs<\/p>\n\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>JQuery remove class example<\/title>\r\n\t<link rel="stylesheet" href="style.css"\/>\r\n\t<script src="https:\/\/code.jquery.com\/jquery-2.1.3.min.js"><\/script>\r\n\t<script src="js.js"><\/script>\r\n<\/head>\r\n<body>\r\n\t<div id="toggle" class="centered rectangled bordered">\r\n\t\t<div id="inner" class="rectangled yellowed"><\/div>\r\n\t<\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nThe stylesheet code can be reduced a little<\/p>\n
.rectangled {\r\n\twidth: 10px;\r\n\theight: 10px;\r\n}\r\n.centered {\r\n\tmargin: 0 auto;\r\n}\r\n.bordered {\r\n\tborder: 3px solid green;\r\n}\r\n.yellowed {\r\n\tbackground: yellow;\r\n}\r\n<\/pre>\nAnd in javascript code we’ll add $(document).ready<\/code> just to be sure the DOM is ready and we can place script<\/code> tag wherever we want<\/p>\n$(document).ready(function() { \/\/ waits until DOM is ready\r\n\t$(\"#toggle\").click(function() { \/\/ selects outer div\r\n\t\t$(\"#inner\").toggleClass(\"yellowed\"); \/\/ toggles class of inner div\r\n\t});\r\n});\r\n<\/pre>\n6. Removing multiple classes<\/h3>\n
removeClass<\/code> method allows you to remove several classes at the same time. It can be implemented using different approaches.<\/p>\nYou may just provide a list of classes passing them as parameters. Consider the following javascript code in the previous example (it will only “uncheck” the checkbox)<\/p>\n
$(document).ready(function() { \r\n\t$(\"#toggle\").click(function() {\r\n\t\t$(\"#inner\").removeClass(\"yellowed\", \"rectangled\");\r\n\t});\r\n});\r\n<\/pre>\nOr you may pass a single string parameter which contains a list of classes to remove separated with a space<\/p>\n
$(document).ready(function() { \r\n\t$(\"#toggle\").click(function() {\r\n\t\t$(\"#inner\").removeClass(\"yellowed\", \"rectangled\");\r\n\t});\r\n});\r\n<\/pre>\nOr you may even provide a function that returns such list if you need to prepare it dynamically (since jQuery 1.4)<\/p>\n
$(document).ready(function() {\r\n\t$(\"#toggle\").click(function() {\r\n\t\t$(\"#inner\").removeClass(getClasses);\r\n\t});\r\n});\r\n\r\nfunction getClasses() {\r\n\treturn \"yellowed rectangled\";\r\n}\r\n<\/pre>\n7. Removing or replacing all classes<\/h3>\n
Sometimes you’ll probably need to remove or replace all the classes of an element. For this case jQuery provides a very convenient way. Let’s continue with the same HTML and CSS and add one more class<\/p>\n
.reded {\r\n background: red;\r\n}\r\n<\/pre>\nDepending on your needs you can use one of these approaches<\/p>\n
$(document).ready(function() {\r\n\t\t$(\"#toggle\").click(function() {\r\n\t\t\t$(\"#inner\").removeClass(); \/\/ removes all the classes\r\n\t\t});\r\n\t});\r\n<\/pre>\n$(document).ready(function() {\r\n\t\t$(\"#toggle\").click(function() {\r\n\t\t\t$(\"#inner\").removeClass().addClass(\"rectangled reded\"); \/\/ removes all the classes and adds the given ones\r\n\t\t});\r\n\t});\r\n<\/pre>\n\t$(document).ready(function() {\r\n\t\t$(\"#toggle\").click(function() {\r\n\t\t\t$(\"#inner\").attr(\"class\", \"rectangled reded\"); \/\/ replaces all the classes with the given ones\r\n\t\t});\r\n\t});\r\n<\/pre>\n
![\"yellow\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/yellow.jpg\")
<\/a>