Remove DOM Element Error

Question

Using this code, I need to remove the generated new element. It is not working. No JS errors are appearing in firebug.

$('.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('<li>'+stuff+' --- <a href="javascript:;" class="remove">Remove Item </a> </li>'); 
        }
    });

Removal:

  $("a.remove").click(function() {
    $(this).fadeOut(500, function() { $(this).remove(); });
    });

Answer 1

$("a.remove").click(function() { $(this).fadeOut(500, function() { $(this).remove(); }); });

That line is going to remove the A link, not the LI tag because you are using $(this)

Answer 2

You need to use the .live event for the anchors with class remove. Also the context of this will be the anchor inside the anchor click therefore you need to use .parent() to fadeOut & remove the li

$('.popular-list li a').live("click",function()  { 
   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('<li>'+stuff+' --- <a href="#" class="remove">Remove Item </a> </li>'); 
    }

  });

  $("a.remove").live('click', function(ev) {
    ev.preventDefault();
    $(this).parent().fadeOut(500, function(ev) { 
        $(this).remove(); 
    });
  });