Apparaître ou disparaître dynamiquement les valeurs d'une "optgroup"

sytle="dislplay:none" ne marche pas ou je ne sais pas où l'utiliser !

Par contre cette fonction marche pour faire disparaître mais le faire ré-apparaître je ne sais pas comment m'y prendre !

Peux tu m'aider ?

<select class="TypeInput" id="MailingListeContacts" style="WIDTH: 300px; HEIGHT: 114px" align="top" multiple size="6" name="MailingListeContacts">

<optgroup label="Membre du bureau">
<option  id="14" value="145">Fabien Rimbot</option>
<option value="17">Daniel Caseau</option>
<option value="187">Jean-Pierre Mazard</option>
</optgroup>

<optgroup label="Client">
<option value="11">Bilot</option>
<option value="23">Cahut</option>
<option value="15">Matoko</option>
<option value="91">Toti</option>
<option value="115">Liones</option>
<option value="54">Zanub</option>
<option value="120">Monoba</option>
<option value="401">Tuto</option>
<option value="751">Zikari</option>
<option value="842">Zondi</option>
</optgroup>

<optgroup label="Visiteur">
<option value="1233">Toto</option>
<option value="1246">Titi</option>
<option value="1559">Tata</option>
</optgroup>

</select>

<p><a href="#" onclick="OptGroup('14')">lien</a></p>

<script>
function OptGroup(id_du_optgroup)
{
  var ie = false;
  var q=document.getElementById(id_du_optgroup);
    if (q) 
 {
  if ( ie ) {
     q.outerHTML=null;
     }
  else  {
     q.innerHTML=null;
     q.label=null;
     }
  }
}
</script>

Ok, j'avais fait une erreur, ça marche.
Peut-on griser l'élément séléctionné plutôt que de l'effacer ?

Sinon j'ai essayé de le faire disparaître totalement, mais je m'embrouille !

Peux tu y jetter un oeuil ?

D'avance merci.
Fabiano13

==============================================

<select class="TypeInput" id="MailingListeContacts" style="WIDTH: 300px; HEIGHT: 114px" align="top" multiple size="6" name="MailingListeContacts">

<optgroup id="Groupe_1" label="Membre du bureau">
<option id="14" value="145">Fabien Rimbot</option>
<option id="17" value="17">Daniel Caseau</option>
<option value="187">Jean-Pierre Mazard</option>
</optgroup>

<optgroup label="Client">
<option value="11">Bilot</option>
<option value="23">Cahut</option>
<option value="15">Matoko</option>
<option value="91">Toti</option>
<option value="115">Liones</option>
<option value="54">Zanub</option>
<option value="120">Monoba</option>
<option value="401">Tuto</option>
<option value="751">Zikari</option>
<option value="842">Zondi</option>
</optgroup>

<optgroup label="Visiteur">
<option value="1233">Toto</option>
<option value="1246">Titi</option>
<option value="1559">Tata</option>
</optgroup>

</select></p>

<select class="TypeInput" id="MailingListeFonction" style="WIDTH: 300px; HEIGHT: 114px" align="top" multiple size="6" name="MailingListeFonction">

<optgroup label="Poste de Direction">
<option value="14">Président directeur général</option>
<option value="25">Directeur général</option>
<option value="37">Gérant</option>
</optgroup>

<optgroup label="Marketing">
<option value="88">Directeur marketing</option>
<option value="47">Chef produits</option>
<option value="53">Assitant(e)</option>
</optgroup>

</select></p>

<p><a href="#" onclick="Optgroup5('14','Groupe_1')">Fabien</a></p>
<p><a href="#" onclick="Optgroup5('17','Groupe_1')">Daniel</a></p>

<script>

function Optgroup5(sIdLabel,sIdGroupe){
  var sLabel = document.getElementById(sIdLabel);
  var sOptGroupe = document.getElementById(sIdGroupe);
if (sLabel!=null){
if(!sLabel.Sauve){
  sLabel.Sauve2 = sLabel.id;
  sLabel.Sauve = sLabel.text; // sauve le texte initial
  sLabel.Sauve3 = sLabel.value;
  sOptGroupe.Sauve4 = sOptGroupe.id;
  SauvegardeTexte = sLabel.Sauve
  SauvegardeId = sLabel.Sauve2
  SauvegardeValue = sLabel.Sauve3
  SauvegardeOptGroupe = sOptGroupe.Sauve4
  sLabel.outerHTML=null;
}
}else{
  objOption1=document.createElement("option")
  objOption1.innerHTML = SauvegardeTexte
  objOption1.value = SauvegardeValue
  objOption1.id = SauvegardeId
  sOptGroupe.appendChild(objOption1) 
}

}

</script>