如何删除以...开头的类？

Question

HTML

<div class="ativo37 and many other classes"></div>
<div class="another classes here with ativo1"></div>
<div class="here ativo9 and more two or three"></div>

JS

$("div[class^='ativo']").on("click", function(){
    $(this).removeClass("^='ativo'"); // How to achieve it?
});

我该怎么做而不是.removeClass("^='ativo'");？

的jsfiddle

Answer 1

.removeClass() 接受一个删除类的函数,并接受索引和旧的CSS值:

一个函数,返回一个或多个要删除的空格分隔的类名.接收集合中元素的索引位置和旧类值作为参数.

您可以删除以所需名称开头的类名,并使用以下内容保留现有名称:

$("div[class*='ativo']").removeClass (function (index, css) {
   return (css.match (/(^|\s)ativo\S+/g) || []).join(' ');
});

工作演示

Answer 2

function removeClassByPrefix(el, prefix) {
    var regx = new RegExp('\\b' + prefix + '.*?\\b', 'g');
    el.className = el.className.replace(regx, '');
    return el;
}

您可以使用此纯Javascript解决方案.

Answer 3

没有jQuery，您可以使用classList和startsWith：

var el = document.querySelector('div[class^="ativo"]');
el.classList.forEach(className => {
  if (className.startsWith('ativo')) {
    el.classList.remove(className);
  }
});