Remove all classes from SVG using jquery

Question

here is my code

<!DOCTYPE html>
<html>
<body>
<style>    
   .someClass {
            fill:gray;
        }
</style>
<svg width="400" height="110">
  <rect class="someClass" width="100" height="100"/>
</svg>
 <svg width="400" height="110">
  <rect class="someClass" width="100" height="100"/>
</svg>
 <svg width="400" height="110">
  <rect class="a" width="100" height="100"/>
</svg>
</body>
</html>

How to remove all classes(.someClass) need to remove only in .someClass in document without using id?

http://stackoverflow.com/questions/8638621/jquery-svg-why-cant-i-addclass — epascarello, Apr 20 '15 at 12:40

score 20 · Accepted Answer · edited May 23 '17 at 11:46

20

You can't call .removeClass() on a SVG, unfortunately.

Use .attr() instead.

$('.someClass').attr('class','');

additional sources:

Martin Wolf

Similar SO Question

edited May 23 '17 at 11:46

Community

1
1

answered Apr 20 '15 at 12:38

Josh Stevenson

895
5
17

8

That will, of course, remove **all** classes. Which is fine for the quoted HTML, but... – T.J. Crowder Apr 20 '15 at 12:41
You could use the [form of `attr` that takes a function](http://api.jquery.com/attr/#attr-attributeName-function) as the second argument. This would give you the old value and you could do a `replaceAll()` to remove it. – GJK Apr 20 '15 at 20:10
Just wanted to add to this there is currently a [PR in jquery to change removeClass so this won't be an issue.](https://github.com/jquery/jquery/pull/2465) – aug Sep 18 '15 at 16:53

score 7 · Answer 2 · edited Apr 20 '15 at 14:52

7

This ( $('.someClass').attr('class',''); ) will delete all the classes of all elements with class someClass.

This should do the trick ( retains other classes):

$(".someClass").each(function(){

     var classes = $(this).attr("class").split(" ");
     var otherClasses = "";
     for(var i = 0; i<classes.length; ++i){
        if(classes[i] !== "someClass"){
            otherClasses += classes[i] + " ";
        }
     }

     $(this).attr("class",otherClasses);

});

Thanks @xehpuk for his comments.

edited Apr 20 '15 at 14:52

Matt

74,352
26
153
180

answered Apr 20 '15 at 12:41

dsharew

10,377
6
49
75

1

This doesn't retain other classes, e.g. "someClass2". – xehpuk Apr 20 '15 at 13:05
hmm yeah but better than `$('.someClass').attr('class','');` – dsharew Apr 20 '15 at 13:06
2

Now this won't remove "someClass" if it's at the end of the string. And it'll still remove "troublesomeClass ". – xehpuk Apr 20 '15 at 13:29
3

@codehx simply use `.replace(/\bsomeClass\b/, '')`. – Karl-André Gagnon Apr 20 '15 at 14:09

chriz · Answer 3 · 2015-04-20T15:21:01.683

4

You can use removeAttr, which will find all the matched elements and will remove the given attribute.
In your case this code will find all elements with class someClass and will remove the attribute class.
And the good in this code is that it will not leave an empty attribute.

$('.someClass').removeAttr( "class" );

edited Apr 20 '15 at 15:21

answered Apr 20 '15 at 12:43

chriz

1,339
2
16
32

2

For the specific case I think this is actually more correct than the answer with the many upvotes because that will leave an empty attribute... – Shikkediel Apr 20 '15 at 15:05
And what happend if the element have more than one class? – Yoann Augen Apr 20 '15 at 20:06
@YoannAugen in that case this answer is not advisable, but it satisfying this question. – chriz Apr 21 '15 at 05:58

score 0 · Answer 4 · edited May 23 '17 at 11:46

0

You can use this. For more info see this https://stackoverflow.com/a/2156090/909535

rect.classList.remove("CLASS_NAME");

edited May 23 '17 at 11:46

Community

1
1

answered Apr 20 '15 at 12:35

meteor

2,518
4
38
52

Remove all classes from SVG using jquery

4 Answers4