removing a class that contains a set of characters

You can pass a function to removeClass which returns a list of classes that you want to remove. In this function, you can test to see if each of the classnames begins with bg, then if it does, add it to a list of classes that you want to remove.

$("#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);
});

Demo: http://codepen.io/iblamefish/pen/EhCaH

---

BONUS

You can neaten up the code by using a named rather than anonymous function for the callback so that you can use it more than once.

// 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(" ");
}

You can then use this function over and over again by passing in its name where you'd usually write 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);
});

This should do the trick while still keeping the other classes:

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