удаление класса, содержащего набор символов

Вы можете передать функцию removeClass, которая возвращает список классов, которые вы хотите удалить. В этой функции вы можете проверить, начинается ли каждое из имен классов с bg, а затем, если да, добавить его в список классов, которые вы хотите удалить.

$("#buttoncolors").on("change", function () {
  var valcolor = $("#buttoncolors").val();

  $("#buttonstyle").removeClass(function (index, classNames) {
    var current_classes = classNames.split(" "), // change the list into an array
        classes_to_remove = []; // array of classes which are to be removed

    $.each(current_classes, function (index, class_name) {
      // if the classname begins with bg add it to the classes_to_remove array
      if (/bg.*/.test(class_name)) {
        classes_to_remove.push(class_name);
      }
    });
    // turn the array back into a string
    return classes_to_remove.join(" ");
  });

  $("#buttonstyle").addClass(valcolor);
});

Демонстрация: http://codepen.io/iblamefish/pen/EhCaH

БОНУС

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

// name the function 
function removeColorClasses (index, classNames) {
  var current_classes = classNames.split(" "), // change the list into an array
      classes_to_remove = []; // array of classes which are to be removed

  $.each(current_classes, function (index, class_name) {
    // if the classname begins with bg add it to the classes_to_remove array
    if (/bg.*/.test(class_name)) {
      classes_to_remove.push(class_name);
    }
  });
  // turn the array back into a string
  return classes_to_remove.join(" ");
}

Затем вы можете использовать эту функцию снова и снова, передав ее имя вместо function () { ... }.

// code that the dropdown box uses
$("#buttoncolors").on("change", function () {
  var valcolor = $("#buttoncolors").val();

  $("#buttonstyle").removeClass(removeColorClasses);

  $("#buttonstyle").addClass(valcolor);
});

// another example: add a new button to remove all classes using the same function
$("#buttonclear").on("click", function () {
  $("#buttonstyle").removeClass(removeColorClasses);
});

Это должно помочь, сохраняя при этом другие классы:

var matches = $('#buttontostyle').attr('class').match(/\bbg\S+/g);
$.each(matches, function(){
    var className = this;
    $('#buttontostyle').removeClass(className.toString());
});

Попробуй это -

$('#buttontostyle:not([class^="bg"])');

Как насчет этого...

// remove class regex expression function
$.fn.removeClassRegEx = function(regex) {
  var classes = $(this).attr('class');
  if (!classes || !regex) return false;
  var classArray = [];
  classes = classes.split(' ');
  for (var i = 0, len = classes.length; i < len; i++)
    if (!classes[i].match(regex)) classArray.push(classes[i]);
  $(this).attr('class', classArray.join(' '));
};

// run function on #card element
$('#card').removeClassRegEx('brand-');

.card-logo {
  background: black;
  color: white;
}

.brand-mastercard {
  background: red;
}

<code id="card" class="card-logo brand-mastercard">Inspect this element</code>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Источник взят отсюда... https://websanova.com/blog/jquery/jquery-remove-class-by-regular-expression

Обеспечивает большую гибкость, когда пользователю просто нужно вернуть true для каждого класса, который он хочет удалить:

$.fn.removeClassBy = function (fun) {
  if (!fun) return
  $(this).removeClass(function (index, classNames) {
    const currentClasses = classNames.split(' '); // change the list into an array
    let classesToRemove = []; // array of classes which are to be removed

    $.each(currentClasses, function (index, className) {
      // if the classname begins with bg add it to the classes_to_remove array
      if (fun(className)) {
        classesToRemove.push(className);
      }
    });
    // turn the array back into a string
    return classesToRemove.join(' ');
  })
}

Использование:

$('[class*="some-partial-class-name"]').removeClassBy(className => className.includes('some-partial-class-name'));

Попробуй это

 $("#buttontostyle").removeClass('[class^="bg"]');