Removing dynamically added elements
<p>I have some code;</p>

<pre><code>(function($) {

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

        $(this).addClass('active').append('&lt;span class="rightImage"&gt;&lt;/span&gt;').prepend('&lt;span class="leftImage"&gt;&lt;/span&gt;');

    });
})(jQuery);
</code></pre>

<p>Which is working well when combined with;</p>

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

<p>However I have hit on a problem, when I mouseout I'm not sure what is the best method of removing or detaching the .active and both span classes.</p>

<p>I've tried adding <code>$(this).remove()</code>, but that is removing the list items from the dom. </p>

<p>How can I just remove the effects ( addClass(), append() and prepend() ) that where added in the original code?</p>

<p>Thanks in advance..</p>
