The function presented in this page can be used to delete and add a css class with JavaScript to multiple HTML elements.
- The function has 3 parameters, receives an Array with the IDs of HTML elements from which will delete the class, another Array with the IDs of HTML elements to which will add the class, and the class value.
Here is the function, called delAddClass().
// delete class from IDs in "dlcls" (array with IDs), add class to IDs in "adcls" (array with IDs)
// "cls" contains the class
function delAddClass(dlcls, adcls, cls) {
 // from: https://coursesweb.net/javascript/
  // get number of elements in array parameters
  var nr_dlcls = dlcls.length;
  var nr_adcls = adcls.length;

  // traverse each array, delete "class" of "dlcls", add class to "adcls"
  for(var i=0; i<nr_dlcls; i++) {
    if(document.getElementById(dlcls[i])) document.getElementById(dlcls[i]).className = '';
  }
  for(var i=0; i<nr_adcls; i++) {
    if(document.getElementById(adcls[i])) document.getElementById(adcls[i]).className = cls;
  }
}
- Example. Two buttons that call the delAddClass() function, setting /changing CSS class of some DIVs.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example delAddClass</title>
<style type="text/css">
#divs {
 position: relative;
 width: 314px;
 margin: 5px auto;
 border: 1px solid #bbbbbb;
 padding: 2px;
 text-align: center;
}
#divs div {
 width: 100px;
 height: 100px;
 margin: 1px 2px;
 float: left;
 background: #ebbbfb;
 font-size: 2em;
}
#divs br { clear: left; }
#divs .cls1 { background: blue; }
#divs .cls2 { background: #00da01; }
</style>
</head>
<body>

<div id="divs">
 <button id="btn1">Add cls1</button>
 <button id="btn2">Add cls2</button>
 <br/><br/>
 <div id="dv1">1</div>
 <div id="dv2">2</div>
 <div id="dv3">3</div>
 <br/>
 <div id="dv4">4</div>
 <div id="dv5">5</div>
 <div id="dv6">6</div>
 <br/>
</div>

<script type="text/javascript"><!--
// delete class from IDs in "dlcls" (array with IDs), add class to IDs in "adcls" (array with IDs)
// "cls" contains the class
function delAddClass(dlcls, adcls, cls) {
 // from: https://coursesweb.net/javascript/
  // get number of elements in array parameters
  var nr_dlcls = dlcls.length;
  var nr_adcls = adcls.length;

  // traverse each array, delete "class" of "dlcls", add class to "adcls"
  for(var i=0; i<nr_dlcls; i++) {
    if(document.getElementById(dlcls[i])) document.getElementById(dlcls[i]).className = '';
  }
  for(var i=0; i<nr_adcls; i++) {
    if(document.getElementById(adcls[i])) document.getElementById(adcls[i]).className = cls;
  }
}

// define arrays with IDs
var ids1 = ['dv1', 'dv3', 'dv5'];
var ids2 = ['dv2', 'dv4', 'dv6'];

// register onclick event for #btn1, btn2 that call delAddClass()
document.getElementById('btn1').onclick = function(){ delAddClass(ids2, ids1, 'cls1'); }
document.getElementById('btn2').onclick = function(){ delAddClass(ids1, ids2, 'cls2'); }
//-->
</script>

</body>
</html>
Demo (click the buttons):


1
2
3

4
5
6


- This delAddClass() function can also be used only for deleting, or adding css class, by passing an empty array to argument.
delAddClass( [ ], ids2, 'cls1');     // just add class, not deletes
delAddClass( ids2, [ ], 'cls1');     // just delete class, not adds

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which attribute can be used to add CSS styles directly in the HTML tag?
type style class
<div style="width: 80%; border: 3px solid #888888;">Content</div>
Which CSS transform method distorts the HTML element in a given angle (including its content)?
translate() scale() skew()
#some_id {
  transform: skew(20deg, 25deg);
  -ms-transform: skew(20deg, 25deg);   /* IE 9 */
  -webkit-transform: skew(20deg, 25deg);   /* Safari and Chrome */
}
Click on the function which converts a Date object to a string.
indexOf() toString() getDate()
var rightnow = new Date();
alert( rightnow.toString() );
Which function applies a callback function to the elements of the given array?
array_merge() array_search() array_map()
$arr = arra("abc", "<p>xyz</p>", "<em>PHP</em>");
// apply the strip_tags() function to delete HTML tags from each array item
$arr = array_map("strip_tags", $arr);
}
Delete and Add CSS class

Last accessed pages

  1. SHA512 Encrypt hash in JavaScript (16120)
  2. DIV and SPAN (5054)
  3. Multiple Select Dropdown List with AJAX (17028)
  4. How to use php variable in external js file (268)
  5. Add /Delete rows in HTML table with JavaScript (1445)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (244)
  2. Register and show online users and visitors (152)
  3. Read Excel file data in PHP - PhpExcelReader (144)
  4. PHP-MySQL free course, online tutorials PHP MySQL code (139)
  5. JavaScript Course - Free lessons (116)