Solved

jQuery: Remove all classes from element that begin with xyz

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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

DOM Attributes and Properties treatment with jQuery 1.6 by Ivo Stoykov jQuery (http://jquery.com/) 1.6 introduces .prop() (http://api.jquery.com/prop/) and .removeProp() (http://api.jquery.com/removeProp/) methods which allow modifying or removi…
There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
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…

911 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now