jQuery ui Tabs : comment résoudre les bugs de la fonction remove

Le plugin jQuery ui tabs comporte des bugs dans la fonction remove.  Le plugin a besoin d’une liste et d’une div qui contiendra le système de tabs qui n'est rien d'autre en HTML que un <ul></ul> ;  les tabs étant des <li></li> qui contiennent des <a href ...></a>.

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#tabs").tabs(); //crée le système de tabs
//Pour supprimer un tab et sa div il suffit d'utiliser
$jQuery("#tabs").tabs("remove",  index) ; //Malheureusement ça ne fonctionne pas toujours correctement et supprime parfois une autre div que celle du tab à enlever. En outre le plugin peut être drag and droppable via la fonction sortable fournie par le framework jQuery ui. (Vous pouvez  déplacer les 4 tabs dans tous les ordres possibles). Là la fonction remove du plugin foire complètement car les index ne se régénèrent pas après changements. Ce sera probablement réglé dans une des prochaines versions du plugin. C'est à espérer du moins.
}); 
</script>

<div id="tabs">
    <ul>
        <li name=”tabs-1”><a href="#tabs-1">Paragraphe 1</a></li>
        <li name=”tabs-2”><a href="#tabs-2">Paragraphe 2</a></li>
        <li name=”tabs-3”><a href="#tabs-3">Paragraphe 3</a></li>
    </ul>
    <div id="tabs-1">
        <p>Paragraphe1.</p>
    </div>
    <div id="tabs-2">
        <p>Paragraphe 2.</p>  </div>
    <div id="tabs-3">
        <p>Paragraphe3.</p>
    </div>
</div>

//Nous avons donc du trouver une alternative et implémenter nous même nos fonctions remove .
Comment avons-nous fait ?
Premièrement il faut créer un attribut name que nous accrochons à nos li <li name="tabName"></li>

<script type="text/javascript">
jQuery(document).ready(function() {
function  removeTabByName(tabName)
{
      var list = jQuery("#tabs ul").find(‘li’) ; // on trouve les li contenues dans l'ul
      var  i =  0; // on instancie une variable à zéro que nous utiliserons plus loin de manière incrémentale
      var href = null; // on instancie une variable href
      list.each(function() //on utilise cette fonction très utile de jQuery each qui est un foreach dans des éléments du DOM ici les li contenues dans le ul
           if(jQuery(this).attr(“name”)==tabName) // si la valeur de l'attribut name correspond à la valeur du paramètre tabName
           {
                Var href = jQuery(this).find(“a”).attr(“href”); // on récupère la valeur de l'attribut href
                jQuery(this).remove();// on supprime la li (le tab)
                jQuery(href).remove(); // on supprime la div
                return false; // permet de faire un break dans la fonction each et d'en sortir
           }
           i++; //on incrémente la variable i qui correspond aux index des positions des li dans le ul jusqu'à ce que l'on trouve la bonne ligne
      });
  }
}) ;
</script>

comment implémenter une fonction removeTabByIndex(index)?

<script type="text/javascript">
jQuery(document).ready(function() {
function  removeTabByIndex(index)
{
      var list = jQuery("#tabs ul").find(‘li’) ; // on trouve les li contenues dans l'ul
      var  i =  0; // on instancie une variable à zéro que nous utiliserons plus loin de manière incrémentale
      var href = null; // on instancie une variable href
      list.each(function() //on utilise cette fonction très utile de jQuery each qui est un foreach dans des éléments du DOM ici les li contenues dans le ul
           if(i==index) // si la valeur de i égale celle de index
           {
                Var href = jQuery(this).find(“a”).attr(“href”); // on récupère la valeur de l'attribut href
                jQuery(this).remove();// on supprime la li (le tab)
                jQuery(href).remove(); // on supprime la div
                return false; // permet de faire un break dans la fonction each et d'en sortir
           }
           i++; //on incrémente la variable i qui correspond aux index des positions des li dans le ul jusqu'à ce que l'on trouve la bonne ligne
      });
  }
}) ;
</script>

Voilà j'espère que cela vous aura aidé. N'hésitez pas à m'écrire si vous aviez des conseils, remarques

Vous pouvez essayer les dites fonctions : les noms des tabs sont : "constat", "removeByTabName","removeByTabIndex", "examples"

Si après suppression vous vouliez revenir à l'état initial faites un rafraichissement de votre page (touche F5). Les éléments enlevés du DOM le sont en effet définitivement!!!