CODEWITHSUNDEEP
javascriptstringmootools
Bruno
Bruno

Reputation: 9057

Remove class completely with MooTools

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

Upvotes: 3

Views: 2680

Answers (2)

Luwe
Luwe

Reputation: 3034

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/

Upvotes: 5

Scott
Scott

Reputation: 2793

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/

Upvotes: 2

Related Questions