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

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

• matthewb: This causes a infinite loop of ev undefined errors although does work once
• Mark: He will also need to use parent() on "var stuff = $(this).text();" because that is also matching A and not the LI
• matthewb: Again Thank you very much redsquare you are my savior

Answer 2

$("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)