刪除動態添加的元素

Question

我有一些代碼;

(function($) { 

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

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

    }); 
})(jQuery); 

當與其結合使用時，它工作得很好;

<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> 

但是我已經打一個問題，當我鼠標移開，我不知道什麼是去除或拆卸。主動和兩個跨度類的最佳方法。

我試過添加$(this).remove()，但是這是從dom中刪除列表項。

我怎麼才能刪除效果（addClass（），append（）和prepend（））在原代碼中添加的位置？

在此先感謝..

Answer 1

如果你沒有在標籤的任何其他跨度，你可以簡單地通過增加鼠標離開處理這樣完成.hover參數：

$('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(); 
    } 
); 

看到hover有關參數的詳細信息。

編輯：懸停（FN1，FN2）是調用.mouseenter（FN1）.mouseleave（FN2）的簡單糖句式

Answer 2

嘗試，鼠標移開時

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

jsFiddle

Answer 3

也許你可以使用mouseover()和mouseout()代替hover()，並嘗試這樣的事：

$('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(); 
});