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 meta tag provides a short description of the page?
<meta content="..."> <meta description="..."> <meta http-equiv="...">
<meta name="description" content="70-160 characters that describes the content of the page" />
Which CSS property is used to stop the wrapping effect of the "float"?
clear text-align position
#some_id {
  clear: both;
}
Click on the method which gets an array with all the elements in the document that have a specified tag name.
getElementsByName() getElementById() getElementsByTagName()
var divs = document.getElementsByTagName("div");
var nr_divs = divs.length;
alert(nr_divs);
Indicate the PHP function which returns the number of elements in array.
is_[) count() strlen()
$arr =[7, 8, "abc", 10);
$nri = count($arr);
echo $nri;        // 4
Delete and Add CSS class

Last accessed pages

  1. AJAX and JSON (1075)
  2. XMLHttpRequest object (3553)
  3. AJAX Course, free Lessons (7723)
  4. List with JavaScript events (216)
  5. CSS3 transition (1487)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1391)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (1361)
  3. Contact page - CoursesWeb (1342)
  4. Tabs effect with CSS (1342)
  5. Insert, Select and Update NULL value in MySQL (843)