Remove all classes that begin with a certain string

Question

I have a div with id  a  that may have any number of classes attached to it  from several groups  Each group has a specific prefix  In the javascript  I don t know which class from the group is on the div  I want to be able to clear all classes with a given prefix and then add a new one  If I want to remove all of the classes that begin with  bg   how do I do that  Something like this  but that actually works       a   removeClass  bg

User · Answer

I also use hyphen -  and digits for class name  So my version include   d-       a   0  className       a   0  className replace   bbg  d-   b g

User · Answer

I was looking for solution for exactly the same problem  To remove all classes starting with prefix  fontid   After reading this article I wrote a small plugin which I m using now    function                 fn removePrefixedClasses   function  prefix                var classNames     this  attr  class   split                       className                  newClassNames                       i                loop class names             for i   0  i  lt  classNames length  i                      className   classNames i                      if prefix not found at the beggining of class name                 if className indexOf prefix      0                        newClassNames push className                       continue                                                 write new list excluding filtered classNames               this  attr  class   newClassNames join                         fQuery      Usage       elementId   removePrefixedClasses  prefix-of-classes

User · Answer

I know it s an old question  but I found out new solution and want to know if it has disadvantages       a   0  className       a   0  className                                replace      s bg     s    g                                      replace   s s  g                                      replace     s  s   g

User · Answer

A regex splitting on word boundary  b isn t the best solution for this   var prefix    prefix   var classes   el className split      filter function c        return c lastIndexOf prefix  0      0      el className   classes join      trim      or as a jQuery mixin     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       2018 ES6 Update   const prefix    prefix   const classes   el className split      filter c   gt   c startsWith prefix    el className   classes join      trim

User · Answer

For modern browsers   let element       a   0   let cls    bg    element classList remove apply element classList  Array from element classList  filter v  gt v startsWith cls

User · Answer

I ve written a simple jQuery plugin - alterClass  that does wildcard class removal   Will optionally add classes too        foo    alterClass   foo-  bar-     foobar

User · Answer

An approach I would use using simple jQuery constructs and array handling functions  is to declare an function that takes id of the control and prefix of the class and deleted all classed  The code is attached   function removeclasses controlIndex classPrefix       var classes         controlIndex  attr  class   split             each classes function index            if classes index  indexOf classPrefix   0                      controlIndex  removeClass classes index                          Now this function can be called from anywhere  onclick of button or from code   removeclasses  a   bg

User · Answer

function          return this each function                 var classes     this  attr  class             if  classes     regex  return false           var classArray                classes   classes split                for var i 0  len classes length  i lt len  i    if  classes i  match regex   classArray push classes i               this  attr  class   classArray join                   jQuery

User · Answer

Using 2nd signature of   fn removeClass       Considering  var  el       lt div class    foo-1 a b foo-2 c foo   gt      function makeRemoveClassHandler regex      return function  index  classes        return classes split   s    filter function  el   return regex test el     join               el removeClass makeRemoveClassHandler   foo-        gt    lt div class   a b c foo  gt   lt  div gt

User · Answer

With jQuery  the actual DOM element is at index zero  this should work      a   0  className       a   0  className replace   bbg    b g

User · Answer

element   removeAttr  class   addClass  yourClass

User · Answer

Prestaul s answer was helpful  but it didn t quite work for me  The jQuery way to select an object by id didn t work  I had to use  document getElementById  a   className   instead of      a   className

User · Answer

You don t need any jQuery specific code to handle this   Just use a RegExp to replace them       a   className       a   className replace   bbg    b g         You can modify this to support any prefix but the faster method is above as the RegExp will be compiled only once   function removeClassByPrefix el  prefix        var regx   new RegExp    b    prefix         b    g        el className   el className replace regx           return el

User · Answer

http   www mail-archive com jquery-en googlegroups com msg03998 html says      and  removeClass   would remove all classes     It works for me     cheers

User · Answer

In one line     Removes all classes that match a regular expression someRegExp      my element id   removeClass  function     return  this className match  someRegExp g         join      replace prog status toLowerCase

[javascript] Remove all classes that begin with a certain string

Examples related to javascript

Examples related to jquery

Examples related to css