CODEWITHSUNDEEP
jquery
matthewb
matthewb

Reputation: 3476

Remove DOM Element Error

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

Upvotes: 0

Views: 731

Answers (2)

redsquare
redsquare

Reputation: 78687

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

Upvotes: 1

Mark
Mark

Reputation: 6228

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

Upvotes: 0

Related Questions