Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

jQuery: Remove all classes from element that begin with xyz

Posted on 2014-04-23
3
Medium Priority
?
1,376 Views
Last Modified: 2014-04-23
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
Comment
Question by:hankknight
  • 2
3 Comments
 
LVL 43

Expert Comment

by:David S.
ID: 40018301
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
 
LVL 16

Author Comment

by:hankknight
ID: 40018340
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
 
LVL 43

Accepted Solution

by:
David S. earned 2000 total points
ID: 40018863
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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month11 days, 5 hours left to enroll

886 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question