Remove class completely with MooTools

Question

This post is linked to my previous one.

I was able thanks to Pointy's answer to use properly RemoveClass with MooTools but unfortunately I still have a problem : even after removing the class from the HTML element the HTML element still has an empty class (class="").

I'm wondering if there's a way to avoid this and to remove completely the class.

my code :

<script type="text/javascript">
  window.addEvent('domready', function(){
    $('votconj').addEvent('click', function() {
      $('first_name_conjoint').addClass("validate['required','nodigit']");
      $('last_name_conjoint').addClass("validate['required','nodigit']");
      $('jj_conjoint').addClass("validate['required']");
      $('mm_conjoint').addClass("validate['required']");
      $('aaaa_conjoint').addClass("validate['required']");
      $('conjoint_regime').addClass("validate['required']");
      new FormCheck('formulaire');
    });

    $('votconj_no').addEvent('click', function() {
      $('first_name_conjoint').removeClass("validate\\['required','nodigit'\\]");
      $('first_name_conjoint').removeProperty('class');
      $('last_name_conjoint').removeClass("validate\\['required','nodigit'\\]");
      $('last_name_conjoint').removeProperty('class');
      $('jj_conjoint').removeClass("validate\\['required'\\]");
      $('jj_conjoint').removeProperty('class');
      $('mm_conjoint').removeClass("validate\\['required'\\]");
      $('mm_conjoint').removeProperty('class');
      $('aaaa_conjoint').removeClass("validate\\['required'\\]");
      $('aaaa_conjoint').removeProperty('class');
      $('conjoint_regime').removeClass("validate\\['required'\\]");
      $('conjoint_regime').removeProperty('class');
      new FormCheck('formulaire');
    });

    new FormCheck('formulaire');
});
</script>

radio button code

<label>Conjoint :</label>
    <input type="radio" name="votconj" id="votconj" value="oui" onclick="affich_conj();">oui
    <input type="radio" name="votconj" id="votconj_no" value="non" checked="checked" onclick="affich_conj();">non

May I ask why you want this? Having `class=""` isn't harmful in any way. — Luwe, Aug 22 '11 at 17:34
@Luwe The problem is that my code is calling another page to check the form and that each time an element of the form has an attribute class the form can't be submitted. — Bruno, Aug 23 '11 at 08:03

score 5 · Accepted Answer · answered Aug 23 '11 at 08:21

5

Use removeAttribute provided by JavaScript itself. It will completely erase the attribute from the tag:

<a href="" class="foo" id="link">Hay</a>

<script>
var link = $('link');
link.removeAttribute('class');
console.log(link);  // <a id="link" href="">
</script>

Example: http://jsfiddle.net/LDBUy/

answered Aug 23 '11 at 08:21

Luwe

3,026
1
20
21

it's odd though, `element.erase` and `element.removeProperty` and `element.property = null` and `delete` all fail. – Dimitar Christoff Aug 23 '11 at 09:43
1

Those are all MooTools methods and I think for their framework they chose to keep `class=""` to make `addClass` and `removeClass` work better and/or faster. Don't know for sure if that's the reason though... – Luwe Aug 23 '11 at 10:03

Scott · Answer 2 · 2011-08-22T15:34:03.833

2

You should be able to use the .removeProperty() method to remove the class attribute.

http://mootools.net/docs/core/Element/Element#Element:removeProperty

Their example:

HTML

<a id="myAnchor" href="#" onmousedown="alert('click');"></a>

JavaScript

//Eww... inline JavaScript is bad! Let's get rid of it.
$('myAnchor').removeProperty('onmousedown');

Resulting HTML

<a id="myAnchor" href="#"></a>

Just swap 'onmousedown' for 'class' in your own code and you should be golden.

EDIT: I updated the jsfiddle from your other question with an example of this (removing the red color from the header) and it works fine. Can you post more of your code to see if the problem is elsewhere?

http://jsfiddle.net/FrT6V/1/

edited Aug 22 '11 at 15:34

answered Aug 22 '11 at 15:01

Scott

2,753
1
24
31

Your answer should work but for an unknown reason it doesn't. I'm going to investigate this ! – Bruno Aug 22 '11 at 15:13
Odd, there may be something else in your code that's interfering. I'll admit that I'm not much of a MooTools expert (the last time I used it was about 3 years ago), so someone else may be able to shed light on why it's not working as expected. – Scott Aug 22 '11 at 15:28

Remove class completely with MooTools

2 Answers2