Is it a problem to remove class that an element does not have?

Question

I have an application that at certain times I need to remove and add classes from an element by Javascript.

$('.elemento').removeClass('minhaClasse')
$('.elemento').addClass('minhaClasse')

Currently I do a check of the element has a class with $('.elemento').hasClass('minhaClasse') before asking to remove, however I saw that on the console there is no error if the class removal command is performed even though he doesn’t have the class added to him.

That’s a problem?

Answer 1

No, no problem. What the function removeClass is basically analyzing the value of the attribute class of the element as string and replace all occurrences of the specified class with a blank space. If the element does not have the class, nothing will be replaced and the value will remain intact.

View function implementation (source):

function (value) {
    var classes, elem, cur, curValue, clazz, j, finalValue, i = 0;

    if (isFunction(value)) {
        return this.each(function (j) {
            jQuery(this).removeClass(value.call(this, j, getClass(this)));
        });
    }

    if (!arguments.length) {
        return this.attr("class", "");
    }

    classes = classesToArray(value);

    if (classes.length) {
        while ((elem = this[i++])) {
            curValue = getClass(elem);

            // This expression is here for better compressibility (see addClass)
            cur = elem.nodeType === 1 && (" " + stripAndCollapse(curValue) + " ");

            if (cur) {
                j = 0;
                while ((clazz = classes[j++])) {

                    // Remove *all* instances
                    while (cur.indexOf(" " + clazz + " ") > -1) {
                        cur = cur.replace(" " + clazz + " ", " ");
                    }
                }

                // Only assign if different to avoid unneeded rendering.
                finalValue = stripAndCollapse(cur);
                if (curValue !== finalValue) {
                    elem.setAttribute("class", finalValue);
                }
            }
        }
    }

    return this;
}

Basically what interests us right now is the excerpt:

if (cur) {
  j = 0;
  while ((clazz = classes[j++])) {

    // Remove *all* instances
    while (cur.indexOf(" " + clazz + " ") > -1) {
      cur = cur.replace(" " + clazz + " ", " ");
    }
  }

  // Only assign if different to avoid unneeded rendering.
  finalValue = stripAndCollapse(cur);
  if (curValue !== finalValue) {
    elem.setAttribute("class", finalValue);
  }
}

Where it traverses all classes indicated in the function parameter:

while ((clazz = classes[j++])) {
    ...
}

And for each class remove all occurrences by replacing them with a blank:

// Remove *all* instances
while (cur.indexOf(" " + clazz + " ") > -1) {
    cur = cur.replace(" " + clazz + " ", " ");
}

If the element does not have the class, the condition cur.indexOf(" " + clazz + " ") > -1 is not satisfied and the value of cur will remain intact in this way, finalValue will equal the curValue and there will be no change in the attribute class.

if (curValue !== finalValue) {
    elem.setAttribute("class", finalValue);
}

Answer 2

This is not a problem, trying to remove a class that does not exist in the element does not generate an exception or any error message.

The only point of attention you need to have is whether this can confuse your code, especially if another programmer does maintenance. It is recommended in this type of case to write a comment stating the intention and function of the line of code.