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 indicates that an input field must be filled out before submitting?
required="required" autofocus="autofocus" placeholder="text"
<input type="text" name="name1" required="required" />
Which CSS method increases or decreases the size of the HTML element (including its content)?
translate() scale() skew()
#some_id:hover {
  transform: scale(2, 1.5);
  -ms-transform: scale(2, 1.5);    /* IE 9 */
  -moz-transform: scale(2, 1.5);   /* Firefox */
}
Click on the Date object method that returns the day of the month.
setDate() getMonth() getDate()
var rightnow = new Date();
var day = rightnow.getDate();
alert(day);
Which function is used to upload a file on server?
is_file() move_uploaded_file() fopen()
if(move_uploaded_file($_FILES["field_name"]["tmp_name"], "dir/file_name")) {
  echo "The file succesfully uploaded";
}
Delete and Add CSS class

Last accessed pages

  1. Insert, Select and Update NULL value in MySQL (30121)
  2. JavaScript Course - Free lessons (15460)
  3. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (12022)
  4. Multiple Select Dropdown List with JavaScript (8219)
  5. Creating objects in ActionScript (7460)

Popular pages this month

  1. Insert, Select and Update NULL value in MySQL (417)
  2. Read Excel file data in PHP - PhpExcelReader (331)
  3. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (258)
  4. PHP getElementById and getElementsByTagName (208)
  5. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (199)