删除动态添加的元素

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