CODEWITHSUNDEEP
javascriptcssregex
Jessica
Jessica

Reputation: 9830

RemoveClass using JavaScript

I'm trying to add/remove a class using JavaScript. (Please don't post about JQuery, because that's irrelevant.) I came upon this answer, which suggested using regular expression to remove the class. Here's the code:

function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

I'm going to be adding and removing the same class. The problem is, how ever many times I do that, that's how many spaces get added to the class name. For example, if I add and remove the class 5 times, there will be 5 spaces between the 2 class names.

How can I prevent the spaces from coming?

CodePen

Code Snippet

var myDiv = document.getElementById('myDiv'),
  par = document.getElementById('par');

myDiv.addEventListener('click', function() {
  if (hasClass(myDiv, 'tryThis')) {
    removeClass(myDiv, 'tryThis');
  } else {
    addClass(myDiv, 'tryThis');
  }
  console.log(myDiv.className);
});



function hasClass(ele, cls) {
  return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(ele, cls) {
  if (!hasClass(ele, cls)) ele.className += " " + cls;
}

function removeClass(ele, cls) {
  if (hasClass(ele, cls)) {
    var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
    ele.className = ele.className.replace(reg, ' ');
  }
}
#myDiv {
  width: 100px;
  height: 100px;
  background-color: green;
}
.tryThis {
  border: 2px solid orange;
}
<div id="myDiv" class="hello">Click Me</div>
<p id="par"></p>

Upvotes: 2

Views: 1083

Answers (4)

Clavin
Clavin

Reputation: 1190

There's two solutions. The first (and easiest) is to use classList. The only downfall to this solution is that you won't be able to keep support for browsers that are older than its implementation.

As for the second solution, which keeps support for old browsers and extends off your regex solution, I'd suggest passing a function to replace that checks if both sides of the class name are whitespace. If they are, return ' ' otherwise return ''.

function removeClass(ele, cls) {
  if (hasClass(ele, cls)) {
    var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
    ele.className = ele.className.replace(reg, function(match) {
      if (match.match(/^\s.+\s$/) !== null) {
        return ' ';
      } else {
        return '';
      }
    });
  }
}

Edit: There's also the option of using a shim, sham, shiv, polyfill, etc.

Upvotes: 3

Dave
Dave

Reputation: 99

Regex is dangerous!*

(* Hah, I'm only kidding!)

If you're looking for a super naive and inefficient solution to this problem, this is what I've come up with. I basically replace what's happening inside your functions by using a number of methods for strings and arrays (.indexOf, .split, .join, etc).

Obviously, this is suboptimal, since the time complexity is going to be linear (at least I think it's linear, since we're iterating over an array a bunch of times).

function hasClass(ele, cls) {
   // Check that our string contains the class name.
   return (ele.className.indexOf(cls) >= 0);
}

function addClass(ele, cls) {
  if (!hasClass(ele, cls)) {
    var classArray = ele.className.split(' ');
    classArray.push(cls);
    ele.className = classArray.join(' ');
  }
}

function removeClass(ele, cls) {
  if (hasClass(ele, cls)) {
    var classArray = ele.className.split(' ');
    var classLocation = classArray.indexOf(cls);
    classArray.splice(classLocation,1);
    ele.className = classArray.join(' ')
  }
}

Upvotes: 0

R.A. Lucas
R.A. Lucas

Reputation: 1161

It looks like if you add trim to the replace statement it's working, so change it to this: ele.className = ele.className.replace(reg, ' ').trim(); Although trim() doesn't work in IE8, so if that's an issue, this isn't a satisfactory solution. Hope this helps.

Best!

Upvotes: 0

dvenkatsagar
dvenkatsagar

Reputation: 936

Why dont you use classList instead:

var ele = document.getElementByID("myDiv");
if(ele.classList.contains("tryThis")){
  ele.classList.remove("tryThis");
}else{
  ele.classList.add("tryThis");
}

Reference : http://callmenick.com/post/add-remove-classes-with-javascript-property-classlist

Upvotes: 0

Related Questions