Ошибка удаления элемента DOM

Question

Используя этот код, мне нужно удалить сгенерированный новый элемент. Это не работает. Нет ошибок JS появляются в 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

Вам нужно использовать событие .live для якорей с классом remove. Также контекст этого будет привязкой внутри щелчка привязки, поэтому вам нужно использовать .parent (), чтобы fadeOut и удалить 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(); 
    });
  });

Answer 2

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

Эта строка будет удалять ссылку A, а не тег LI, потому что вы используете $ (this)