2

Tenho uma aplicação que em determinados momentos preciso remover e adicionar classes de um elemento por JavaScript.

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

Atualmente eu faço uma verificação de o elemento tem uma classe com $('.elemento').hasClass('minhaClasse') antes de pedir para remover, porém vi que no console não gera nenhum erro se o comando de remoção da classe for efetuado mesmo ele não tendo a classe adicionada nele.

Isso é um problema?

1
  • 1
    Não é problema nem em jQuery (caso do exemplo da pergunta), nem em JS puro.
    – bfavaretto
    Commented 29/03/2019 às 14:47

2 Respostas 2

3

Não, nenhum problema. O que a função removeClass faz é basicamente analisar o valor do atributo class do elemento como string e substituir todas as ocorrências da classe especificada por um espaço em branco. Se o elemento não possuir a classe, nada será substituído e o valor permanecerá intacto.

Veja a implementação da função (fonte):

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;
}

Basicamente o que nos interessa nesse momento é o trecho:

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);
  }
}

Onde ele percorre todas as classes indicadas no parâmetro da função:

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

E para cada classe remove todas as ocorrências substituindo-as por um espaço em branco:

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

Se o elemento não possuir a classe, a condição cur.indexOf(" " + clazz + " ") > -1 não é satisfeita e o valor de cur permanecerá intacto, desta forma, finalValue será igual ao curValue e não haverá alteração no atributo class.

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

Isso não é um problema, tentar remover uma classe que não existe no elemento não gera exceção ou qualquer mensagem de erro.

O único ponto de atenção que você precisa ter é se isso pode deixar seu código confuso, principalmente caso outro programador dê manutenção. É recomendável neste tipo de caso escrever um comentário informando a intenção e função da linha de código.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .