Remove DOM Element Error
<p>Using this code, I need to remove the generated new element. It is not working. No JS errors are appearing in firebug. </p>

<pre><code>$('.popular-list li a').live("click",function() //this will apply to all anchor tags
            { 
                    var stuff = $(this).text();
                            var hasDuplicate = false;

          $('#favoritesdrinks li').each( function(){
           if ($(this).text() === stuff ){
              hasDuplicate = true;
              return false;
           }
        });

        if (hasDuplicate ) {
           alert("Already Added") } 
        else {         
           $('#favoritesdrinks').append('&lt;li&gt;'+stuff+' --- &lt;a href="javascript:;" class="remove"&gt;Remove Item &lt;/a&gt; &lt;/li&gt;'); 
        }
    });

Removal:

  $("a.remove").click(function() {
    $(this).fadeOut(500, function() { $(this).remove(); });
    });
</code></pre>
