Suppression des éléments ajoutés dynamiquement

Question

J'ai du code;

(function($) { 

    $('nav.top ul li').hover(function() { 

     $(this).addClass('active').append('<span class="rightImage"></span>').prepend('<span class="leftImage"></span>'); 

    }); 
})(jQuery); 

Qui fonctionne bien lorsqu'il est combiné avec;

<nav class="top"> 
     <ul> 
      <li> 
       <a href="index.php">Home</a> 
      </li> 
      <li> 
       <a href="events.php">Events</a> 
      </li> 
      <li> 
       <a href="marketingguidance.php">Marketing</a> 
      </li> 
      <li> 
       <a href="news.php">News</a> 
      </li> 
      <li> 
       <a href="salestoolkit.php">Sales</a> 
      </li> 
     </ul> 
    </nav> 

Cependant, je l'ai frappé sur un problème, quand je mouseOut Je ne sais pas quelle est la meilleure méthode d'élimination ou de détacher le .active et les deux classes de portée.

J'ai essayé d'ajouter $(this).remove(), mais cela supprime les éléments de liste de la dom.

Comment puis-je simplement supprimer les effets (addClass(), append() et prepend()) qui ont été ajoutés dans le code d'origine?

Merci à l'avance ..

Answer 1

Si vous n'avez pas d'autre portée dans la balise, vous pouvez simplement compléter .hover paramètre en ajoutant le gestionnaire de mouseleave comme ceci:

$('nav.top ul li').hover(
    function() { 
     $(this).addClass('active') 
       .append('<span class="rightImage"></span>') 
       .prepend('<span class="leftImage"></span>'); 

    }, 
    function() { 
     $(this).removeClass('active').children("span").remove(); 
    } 
); 

voir hover pour plus d'informations sur les paramètres.

Edit: vol stationnaire (FN1, Fn2) est tout simplement d'appeler le sucre syntaxique .mouseenter (FN1) .mouseleave (Fn2)

Answer 2

Essayez, sur mouseout

$(this).removeClass("active").children("span").remove(); 

jsFiddle

Answer 3

Peut-être que vous pouvez utiliser mouseover() et mouseout() au lieu de hover(), et d'essayer quelque chose comme ceci:

$('nav.top ul li').mouseover(function() { 
    $(this).addClass('active').append('<span class="rightImage"></span>').prepend('<span class="leftImage"></span>'); 
}); 

$('nav.top ul li').mouseout(function() { 
    $(this).removeClass('active').children("span").remove(); 
});