Удаление CSS класса из элемента с помощью JavaScript (без jQuery)

Для удаления класса из элемента с определённым идентификатором на JavaScript, можно использовать следующий код:

document.getElementById("MyID").className =
    document.getElementById("MyID").className.replace(/\bMyClass\b/, '');

Здесь MyID — это идентификатор элемента, а MyClass — это название класса, который вы хотите удалить.

UPDATE: Чтобы поддерживать имена классов, содержащие дефиси (например, "My-Class"), используйте следующий код:

document.getElementById("MyID").className =
  document.getElementById("MyID").className
    .replace(new RegExp('(?:^|\\s)' + 'My-Class' + '(?:\\s|$)'), ' ');

Это позволит корректно удалить классы, даже если они окружены пробелами или являются частью других классов.

Вот способ добавить эту функциональность ко всем элементам DOM:

HTMLElement.prototype.removeClass = function(remove) {
    var newClassName = "";
    var i;
    var classes = this.className.split(" ");
    for(i = 0; i < classes.length; i++) {
        if(classes[i] !== remove) {
            newClassName += classes[i] + " ";
        }
    }
    this.className = newClassName.trim(); // Удаляем лишний пробел в конце
}

Этот метод removeClass удаляет указанный класс из списка классов элемента. Он итеративно проверяет все классы и добавляет только те, которые не совпадают с переданным классом, к новой строке, которая затем присваивается свойству className. Обратите внимание, что в конце строки можно использовать trim(), чтобы избежать лишнего пробела в конце результата.

Вы можете использовать методы classList.add() и classList.remove() для добавления и удаления классов у элементов в вашем HTML. Например, вы можете добавить класс "foo" к элементу div, используя следующий код:

div.classList.add("foo");

А затем, чтобы удалить этот же класс, вы можете использовать:

div.classList.remove("foo");

Эти методы позволяют удобно управлять классами элемента без необходимости модифицировать значения className напрямую, что помогает избежать возможных ошибок и упрощает работу с классами. Для получения дополнительной информации вы можете ознакомиться с документацией на MDN: element.classList.

Попробуйте вот такой код:

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

Эта функция hasClass проверяет, есть ли у элемента ele заданный класс cls. Она использует регулярное выражение для поиска класса в строке className. Если класс присутствует, функция removeClass удаляет его, также используя регулярное выражение. Обратите внимание, что при удалении класса в строке className добавляется пробел, чтобы избежать возможных проблем с форматированием строк.

Если у вас есть дополнительные вопросы или нужны уточнения, не стесняйтесь спрашивать!

Редактировать

Хорошо, полный пересмотр. Прошло некоторое время, я немного научился, и комментарии помогли.

Node.prototype.hasClass = function (className) {
    if (this.classList) {
        return this.classList.contains(className);
    } else {
        return (-1 < this.className.indexOf(className));
    }
};

Node.prototype.addClass = function (className) {
    if (this.classList) {
        this.classList.add(className);
    } else if (!this.hasClass(className)) {
        var classes = this.className.split(" ");
        classes.push(className);
        this.className = classes.join(" ");
    }
    return this;
};

Node.prototype.removeClass = function (className) {
    if (this.classList) {
        this.classList.remove(className);
    } else {
        var classes = this.className.split(" ");
        classes.splice(classes.indexOf(className), 1);
        this.className = classes.join(" ");
    }
    return this;
};

Старый пост

Я только что работал с чем-то подобным. Вот решение, которое я придумал...

// В некоторых браузерах нет встроенной функции trim()
if(!String.prototype.trim) {
    Object.defineProperty(String.prototype, 'trim', {
        value: function() {
            return this.replace(/^\s+|\s+$/g, '');
        },
        writable: false,
        enumerable: false,
        configurable: false
    });
}

// addClass()
// сначала проверяет, существует ли имя класса; если нет, добавляет класс.
Object.defineProperty(Node.prototype, 'addClass', {
    value: function(c) {
        if (this.className.indexOf(c) < 0) {
            this.className += ' ' + c;
        }
        return this;
    },
    writable: false,
    enumerable: false,
    configurable: false
});

// removeClass()
// удаляет класс и очищает значение className, заменяя двойные пробелы на одинарные
// и убирая лишние пробелы в начале и в конце
Object.defineProperty(Node.prototype, 'removeClass', {
    value: function(c) {
        this.className = this.className.replace(c, '').replace('  ', ' ').trim();
        return this;
    },
    writable: false,
    enumerable: false,
    configurable: false
});

Теперь вы можете вызвать myElement.removeClass('myClass')

или использовать цепочку: myElement.removeClass("oldClass").addClass("newClass");