Solved

jQuery: Remove all classes from element that begin with xyz

Posted on 2014-04-23
3
1,279 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 42

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 42

Accepted Solution

by:
David S. earned 500 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

How our DevOps Team Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

Question has a verified solution.

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

by Julian Matz As of jQuery (http://jquery.com/) 1.4 the .live() method (http://api.jquery.com/live/) supports custom events as well as some standard JavaScript events that it previously didn't support. Among these is the submit event. Unlike …
I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use. Why should I use jQuery as opposed to regular JavaScript? Now I know…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

825 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