Using a regular expression to split on word boundaries \b may not be the most optimal solution for this scenario:

var prefix = "prefix";
var classes = el.className.split(" ").filter(function(c) {
    return c.lastIndexOf(prefix, 0) !== 0;
});
el.className = classes.join(" ").trim();

An alternative approach using jQuery could be:

$.fn.removeClassPrefix = function(prefix) {
    this.each(function(i, el) {
        var classes = el.className.split(" ").filter(function(c) {
            return c.lastIndexOf(prefix, 0) !== 0;
        });
        el.className = $.trim(classes.join(" "));
    });
    return this;
};

Updating to ES6 in 2018:

const prefix = "prefix";
const classes = el.className.split(" ").filter(c => !c.startsWith(prefix));
el.className = classes.join(" ").trim();

I have created a convenient jQuery plugin called alterClass which enables wildcard class removal and the optional addition of classes.

$( '#foo' ).alterClass( 'foo-* bar-*', 'foobar' ) 

To handle this situation, you can utilize a regular expression without relying on any specific jQuery code:

document.getElementById("a").className = document.getElementById("a").className.replace(/\bbg.*?\b/g, '');

If you want to support various prefixes, you can use the following function. However, keep in mind that the previous method is faster because the RegExp is compiled only once:

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

Utilizing the 2nd parameter in $.fn.removeClass method:

// Here is an example scenario:
var $element = $('<div class="  foo-1 a b foo-2 c foo"/>');

function createRemoveClassFunction(regex) {
  return function (index, classes) {
    return classes.split(/\s+/).filter(function (el) {return regex.test(el);}).join(' ');
  }
}

$element.removeClass(createRemoveClassFunction(/^foo-/));
//> [<div class=​"a b c foo">​</div>​]

To enhance your browsing experience:

const selectedElement = $('#a')[0];
const className = 'bg';

selectedElement.classList.remove.apply(selectedElement.classList, Array.from(selectedElement.classList).filter(value => value.startsWith(className)));

In my approach using basic jQuery functions and array manipulation techniques, I would create a function that removes all classes from a specified control based on a given prefix. Below is the code snippet:

function removeClasses(controlId, classPrefix){
    var classes = $("#"+controlId).attr("class").split(" ");
    $.each(classes,function(index) {
        if(classes[index].indexOf(classPrefix) == 0) {
            $("#"+controlId).removeClass(classes[index]);
        }
    });
}

This function can be easily invoked by a button click or within the code as follows:

removeClasses("elementId","prefix");

http://www.mail-archive.com/[email protected]/msg08867.html mentions:

...and using .removeClass() will eliminate all existing classes...

This method has been successful for me ;)

Cheers!

After encountering a similar issue, I embarked on a quest to find a solution. My aim was to eliminate all classes that began with the prefix "fontid_". Upon stumbling upon an enlightening article, I took it upon myself to craft a nifty plugin which has since become an integral part of my toolkit.

(function ($) {
        $.fn.removePrefixedClasses = function (prefix) {
            var classNames = $(this).attr('class').split(' '),
                className,
                newClassNames = [],
                i;
            //traverse through class names
            for(i = 0; i < classNames.length; i++) {
                className = classNames[i];
                // filter out class names that do not start with the specified prefix
                if(className.indexOf(prefix) !== 0) {
                    newClassNames.push(className);
                    continue;
                }
            }
            // update the element's class attribute with the new list of class names
            $(this).attr('class', newClassNames.join(' '));
        };
    }(fQuery));

To utilize this plugin, follow the example below:

$('#elementId').removePrefixedClasses('prefix-of-classes_');

With just one line of code ... You can eliminate all classes that correspond to a specified regular expression someRegExp

$('#element_to_modify').removeClass( function() { return (this.className.match(/someRegExp/g) || []).join(' ').replace(prog.status.toLowerCase(),'');});

Even though this question is from a while ago, I have discovered a new solution and am curious to know if there are any drawbacks to it?

$('#a')[0].className = $('#a')[0].className
                              .replace(/(^|\s)bg.*?(\s|$)/g, ' ')
                              .replace(/\s\s+/g, ' ')
                              .replace(/(^\s|\s$)/g, '');

Though Prestaul offered a helpful answer, it didn't fully resolve my issue. The jQuery method for selecting an object by id wasn't effective in my case. I resorted to using

document.getElementById("a").className

instead of the initial approach of

$("#a").className

When naming classes, I include hyphens '-' and digits as well. My pattern includes '\d-'

$('#b')[0].className = $('#b')[0].className.replace(/\bbg.\d-*?\b/g, '');

(function($)
{
    Modify the classes of elements in a jQuery selection based on a specified regex pattern.
    This function iterates through each element in the selection, checks its current classes against the regex pattern,
    and removes any classes that do not match the pattern.

})(jQuery);

Although this post is quite dated, I managed to find a solution that worked well for me.

$('[class*=classtoremove]').each(function( index ) {
    var classArray = $(this).attr('class').split(' ');
    $.each( classArray, function( key, value ) {
        if(value.includes('classtoremove')) {
            console.log(value);
            $('.' + value).removeClass(value);
        }
    });
});

This code snippet targets any class containing the term classtoremove, regardless of additional characters appended to it. Whether it's classtoremove234164726 or classtoremove767657576575, this script will identify and remove these classes without needing to replace or add anything extra.

$('[class*=classtoremove]').each(function( index ) {
    var classArray = $(this).attr('class').split(' ');
    $.each( classArray, function( key, value ) {
        if(value.includes('classtoremove')) {
            console.log(value + ' has been removed');
            $('.' + value).removeClass(value);
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class='classtoremove235235235 chicken omlets wrapper'></div>
<div class='classtoremove354645745 chicken omlets wrapper'></div>
<div class='classtoremoveesdfdfh5645 chicken omlets wrapper'></div>
<div class='classtoremove3425423wdt chicken omlets wrapper'></div>
<div class='classtoremovewdgrt346 chicken omlets wrapper'></div>
<div class='classtoremovesdgsbfd4454 chicken omlets wrapper'></div>
<div class='classtoremove45454545 chicken omlets wrapper'></div>
<div class='classtoremove666eed chicken omlets wrapper'></div>

If you prefer using jQuery exclusively, here is the converted top answer:

const prefix = 'prefix'
const classes = el.attr('class').split(' ').filter(c => !c.startsWith(prefix))
el.attr('class', classes.join(' ').trim())