Removing class in Javascript

JavaScript
1

I am trying to remove a class in Javascript (without jquery) but it doesnt seem to work. Is there something I am missing from the code?

function removeClass(selector, myClass) {
  elements = document.querySelectorAll(selector);
  for (var i=0; i<elements.length; i++) {
    elements[i].classList.remove(myClass);
  }
}
removeClass('top-header', 'bottom-footer', 'header-content');
2

You’re passing in 3 values to the function which only takes 2.

Your first value is not a selector, it is just a string which will try to resolve to an element ie: <top-header>, which isn’t valid HTML. You will need to add # for an id or . for a class to the front of it. The .querySelectorAll() method works just like $(selector) in jQuery.

3

I did try that first but didnt seem work either

4

Hi there dev113,

here is an example…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

</head>
<body> 

 <div class="foo top-header"></div>
 <div class="foo bottom-footer"></div>
 <div class="foo header-content"></div>

<script>
(function(d) {
   'use strict';

function removeClass( selector, myClass, myClass1, myClass2 ) {
  var elements = d.querySelectorAll(selector);
  for (var i = 0; i < elements.length; i ++ ) {
       elements[i].classList.remove( myClass );
       elements[i].classList.remove( myClass1 );
       elements[i].classList.remove( myClass2 );
   }
 }
   removeClass('.foo', 'top-header', 'bottom-footer', 'header-content');
}( document ));
</script>

</body>
</html>

coothead

5

Is there a method to remove the css property and styles instead of the html div

6

The code does do that. :winky:

Try this with javascript enabled and disabled…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<style media="screen">
.foo {
    padding: 1em;
    margin: 0.5em 0;
    border: 0.062em solid #000;
    text-align: center;
 }
.top-header {
    background-color: #fee;
 }
.bottom-footer {
    background-color: #eef;
 }
.header-content {
    background-color: #efe;
 }
</style>

</head>
<body> 

 <div class="foo top-header">A</div>
 <div class="foo bottom-footer">B</div>
 <div class="foo header-content">C</div>

<script>
(function(d) {
   'use strict';

function removeClass( selector, myClass, myClass1, myClass2 ) {
  var elements = d.querySelectorAll(selector);
  for (var i = 0; i < elements.length; i ++ ) {
       elements[i].classList.remove( myClass );
       elements[i].classList.remove( myClass1 );
       elements[i].classList.remove( myClass2 );
   }
 }
   removeClass('.foo', 'top-header', 'bottom-footer', 'header-content');
}( document ));
</script>

</body>
</html>

coothead

7

I do not have a selector appended to the divs. Is it possible to just remove the classes?

Thanks

8

Can you show us the HTML elements from which you want to remove the class attributes?

coothead

9

Just these

.top-header
.bottom-footer
.header-content

10

Well if nothing else you can query these elements by the very classes you want to remove… e.g. using your removeClass() function:

removeClass('.top-header', 'top-header')
removeClass('.bottom-footer', 'bottom-footer')
removeClass('.header-content', 'header-content')
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.