Remove All Classes That Begin With a Certain String

function myfunction() {  var div = document.getElementsByTagName('div')[0];    var matches = [];  div.classList.forEach(function (value) {    //remove page-parent    if (/^page.+/.test(value)) {      matches.push(value);    }  });  matches.forEach(function (value) {      div.classList.remove(value);  });}
myfunction();

<div class="page-parent pop">  check out</div>

How to remove a class that starts with...?

.removeClass() accepts a function for removing classes and accepts index and old CSS value:

A function returning one or more space-separated class names to be removed. Receives the index position of the element in the set and the old class value as arguments.

You can remove the classname that starts with required name and keep the existing using:

$("div[class*='ativo']").removeClass (function (index, css) {
   return (css.match (/(^|\s)ativo\S+/g) || []).join(' ');
});

Working Demo

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);
});

How can I remove all CSS classes of an HTML element?

You can use forEach and removeAttribute to remove the class attribute from child elements:

document.querySelectorAll('#example *').forEach(element => {
  element.removeAttribute('class');
});

jQuery - remove all element classes starts on specific pattern

The RegExp you have posted in the question is not working because the \b is not escaped as \\b. Hence the actual RegExp is becoming /layout-.*?/g instead of /\blayout-.*?\b/g. Doing the below change would work.

var regex = new RegExp('\\b' + 'layout-' + '.+?\\b', 'g');

---

You can also try like the below. This removes all classes that are like layout-X

var regex = /(\s)*(layout-.*?)(?=\s)/g; 
$('#test')[0].className = $('#test')[0].className.replace(regex, '');

Demo Fiddle

Input: class=sample layout-10 layout-9 sample1 slayout

Output: class=sample sample1 slayout

RegExp Explained:

\s - Any whitespace character

(layout-.*?) - Capture all values like layout-X where X can be any character any number of times

(?=\s) - Look ahead upto the next whitespace character (meaning till end of word)

---

As pointed out by musefan in the comments var regex = /\blayout-.+?\b/g; will also do the job.

---

Related Topics