Basic product builder I'm developing a very basic product builder. Part of the builder has a basic text editor including some text color presets. As it stands, the presets remove a class that defines the text color and add in their own color class.

Looking at my code, it feels absurdly clunky and inefficient. I'm sure there has to be a better way to achieve what I'm working on, but I'm having a hard time figuring out even a starting point to research on what I would need to do to fix this.

$(".black-sel").click(function(){
  $("#prevTex").removeClass (function (index, css) {
    return (css.match (/\btextc-\S+/g) || []).join(' ');});
  $("#prevTex").addClass("textc-black");
});
$(".white-sel").click(function(){
  $("#prevTex").removeClass (function (index, css) {
    return (css.match (/\btextc-\S+/g) || []).join(' ');});
  $("#prevTex").addClass("textc-white");
});
$(".red-sel").click(function(){
  $("#prevTex").removeClass (function (index, css) {
    return (css.match (/\btextc-\S+/g) || []).join(' ');});
  $("#prevTex").addClass("textc-red");
});
Abstract a common function out:

var myFunction = function(myClass){
  $("#prevTex").removeClass (function (index, css) {
    return (css.match (/\btextc-\S+/g) || []).join(' ');});
  $("#prevTex").addClass(myClass);
});


Then apply it like so:

$(".black-sel").click(function(){ myFunction("textc-black"); });
$(".white-sel").click(function(){ myFunction("textc-white"); });
$(".red-sel").click(function(){ myFunction("textc-red"); });