removeClass function doesn't work

Question

I want to remove class in html code. So I use the removeClass function in Jquery. However, it doesn't work. To be more specific in the code, I want to let the opacity of graph become 0(disappear) when I click remove button. However it does nothing. I don't know what's wrong there. Can anyone explain a little bit? Thanks in advance!

Here is Jsfiddle Link Here is real code:

<!DOCTYPE html>
<html>
<head>

   <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
   <script type="text/javascript">

  function remove_R() {
      $(".me rect").removeClass("rect_obvious");
  }

  </script>
  <style type="text/css">
  .rect_style {
     stroke:black;
     stroke-width:5;

  }
  .rect_color_1{
      fill:#FFC863;
  }

  .rect_obvious{
        opacity:1;
  }  

  .rect_none{
    opacity: 0;
  }
  </style>
</head>


<body>

<svg class="me" width="145" height="65"><rect  class="rect_style rect_color_1 rect_obvious" x="3" y="3" rx="20" ry="20"  width="140" height="60" ></svg>
<button onclick="remove_R()">remove</button>

</body>
</html>

@DanielA.White But I just tried to add rect into $(".me") on the jsfiddle code, it still doesn't work. — user3920796, Aug 21 '14 at 15:55
possible duplicate of [jQuery SVG, why can't I addClass?](http://stackoverflow.com/questions/8638621/jquery-svg-why-cant-i-addclass) — Jay Blanchard, Aug 21 '14 at 16:06

score 1 · Accepted Answer · answered Aug 21 '14 at 15:49

1

element rect has class rect_obvious and not .me.so use:

 $(".me rect").removeClass("rect_obvious");

answered Aug 21 '14 at 15:49

Milind Anantwar

81,290
25
94
125

I added it into the code. http://jsfiddle.net/qn079oqa/1/ . However it still doesn't work. – user3920796 Aug 21 '14 at 15:56
The remove_R function is not executed in your fiddle. remove_R is not defined as says Chrome's Javascript console. – tomaoq Aug 21 '14 at 15:58
@lechariotdor Thanks for your response. So what should I do if I want remove_R to be executed? – user3920796 Aug 21 '14 at 16:02
@lechariotdor Hi, now I put javascript code into the html and used an alert message to show that the remove_R function have been executed. This link is http://jsfiddle.net/qn079oqa/3/. removeClass still doesn't work. – user3920796 Aug 21 '14 at 16:10

score 1 · Answer 2 · edited May 23 '17 at 10:33

1

It works when I change code:

$(".me rect").removeClass("rect_obvious");

into:

$(".me rect").attr("class", "rect_obvious rect_none");

Note: The Jsfiddle link

removeClass, addClass and toggleClass are not fit for SVG.

This question is similar to the one: jQuery SVG, why can't I addClass?

Thanks,Jay Blanchard. He reminded me about this!

edited May 23 '17 at 10:33

Community

1
1

answered Aug 21 '14 at 16:22

user3920796

35
1
6

score 0 · Answer 3 · answered Aug 21 '14 at 16:22

Besides the problem of accessing the wrong node $('.me'), the other problem is that your using a svg tag which is "special", jQuery returns false for the hasClass.

A work around it to pull the class attribute, modify it and then setting it to the new value.

http://jsfiddle.net/qn079oqa/4/

removeClass function doesn't work

3 Answers3