Удалить все классы CSS, названные как данный шаблон?

Question

Есть ли простой способ удалить класс из элемента, когда я не знаю точное имя класса (только префикс)?

Сначала это может показаться странным, поэтому я приведу пример, чтобы уточнить: кнопка Bootstrap может иметь btn-primary xor btn-success xor btn-danger xor ... применяется. Я хочу удалить этот класс (в зависимости от того, что он есть) и применить новый.

В настоящее время у меня есть:

let btnClasses = [ 'btn-primary', 'btn-success', ... ]; 
$.each(btnClasses, function(i, x) { 
    $(myElem).removeClass(x); 
}); 

Я хотел бы иметь что-то так:

$(myElem).removeClass('btn-*'); 

Есть встроенный способ сделать это?

Answer 1

Вы можете написать свой собственный плагин для jQuery. Это было бы названо по-другому, но это один из способов.

$.fn.removeClassRegex = function (pattern) { 
 
    var element = $(this); 
 
    var classNames = element.attr('class').split(' '); 
 
    $(classNames).each(function (key, value) { 
 
    if (value.match(pattern)) { 
 
     element.removeClass(value); 
 
    } 
 
    }); 
 
} 
 

 
$('div').removeClassRegex('test-[a-z]'); 
 
console.log($('div').attr('class'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="test-bar foo"> 
 
</div>