Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1393
  • Last Modified:

jQuery: Remove all classes from element that begin with xyz

In this example, I want to remove all classes from #box that begin with xyz.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
 
    //////// Remove all classes from #box that begin with xyz

});
</script>

</head>
<body>

<div id="box" class="xyz1 xyz2 xyzzy hello world"></div>

</body>
</html>

Open in new window

0
hankknight
Asked:
hankknight
  • 2
1 Solution
 
David S.Commented:
Here's one way to do that:
var box=$('#box'),
  cAr1=box.get(0).className.split(/\s+/),
  cAr2=[];
$.each(cAr1,function(idx,val){
  if(val.indexOf('xyz')!=0) cAr2.push(val);
});
box.get(0).className=cAr2.join(' ');

Open in new window

And here's a second way:
var box=$('#box'),
  cAr=box.get(0).className.split(/\s+/);
$.each(cAr,function(idx,val){
  if(val.indexOf('xyz')===0) cAr.splice(idx,1);
});
box.get(0).className=cAr.join(' ');

Open in new window

0
 
hankknightAuthor Commented:
Could this be done using REGEX instead of using an each loop?  This does not work:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
 

var currClass = $('#box').attr("class");
var newClass = currClass.replace(/\sxyz*[^\s]|^xyz*[^\s]\s+/g,"");
alert(newClass);
$('#box').attr("class", newClass);

});
</script>

</head>
<body>

<div id="box" class="xyz1 xyz2 xyzzy hello world xyz555 xyzttt"></div>

</body>
</html>

Open in new window

0
 
David S.Commented:
Yes, but regular expressions may be less efficient for this.

Your code says 0 or more "z" characters. What you want is 0 or more characters allowed in class names or non-white-space characters if you don't want to be as restrictive.
var newClass = currClass.replace(/\sxyz[^\s]*|^xyz[^\s]*\s+/g,"");

Open in new window

0

Featured Post

Become an Android App Developer

Ready to kick start your career in 2018? Learn how to build an Android app in January’s Course of the Month and open the door to new opportunities.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now