Solved

jQuery: Remove all classes from element that begin with xyz

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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Hi all! Recently there was EE question and the person wanted to have a multi-column textbox <div> selection, so as a first step to answer I provided a link but that was not complete with JavaScript selection, but had a good style sheet. So as a ques…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
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…

746 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

12 Experts available now in Live!

Get 1:1 Help Now