CODEWITHSUNDEEP
javascriptjquery
Beezee
Beezee

Reputation: 45

JavaScript/Jquery event problems

I have been creating a to do list over the last few days although I've run into a small bug that I just can not fix.

The problem is... When I move a To Do from the "current to dos list" to the "Completed to dos list" they can not be deleted individually on the "completed to dos" page through the bin icon.

I am new to this so my code may be a mess or you may see some bad practices. If you do notice this feel free to say that as well so i can learn. :)

VIEW FULL PROJECT HERE! https://codepen.io/beezeecode/pen/EvmBGo 

// Transfer Li from Current to completed.
 $("ul").on("click", ".move", function(){  
  $(this).parent().remove().appendTo( "#container1");
  $(this).parent().removeClass("move comp").addClass("appendToDo comp2 comp1");
  $(this, ':nth-child(2)').remove();
});

// Delete a To dos present in the COMPLETED list. 

$("#delComp").on("click", ".delSpan", function(){
   $(this).fadeOut(500,function(){
   $(this).remove();
  });
});

Thanks in advance for any help!

Upvotes: 2

Views: 59

Answers (3)

Ricardo Rodrigues
Ricardo Rodrigues

Reputation: 2258

The issue is that your <li> is being moved into the #container1 instead of the #delComp <ul>

Upvotes: 0

Theophilus Omoregbee
Theophilus Omoregbee

Reputation: 2503

The main problem is that the Completed Todo is not in an UL anymore, so the li are dangling and no parent like ul, so the selector used here $("ul").on("click", ".delSpan", won't work again,

so the fix is to do , but observe the changes made to the appendTo #container1 > #delComp

    // Transfer Li from Current to completed.
$("ul").on("click", ".move", function(){  
  $(this).parent().remove().appendTo( "#container1 > #delComp");
  $(this).parent().removeClass("move comp").addClass("appendToDo comp2 comp1");
  $(this, ':nth-child(2)').remove();
});

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

The issue is because when you move the li elements between lists you're appending them to the containing div instead of the ul. This in turn means that the delegated event on the delete button is not attached.

To fix this amend the appendTo() call in your .move handler:

$(this).parent().remove().appendTo("#delComp");

Updated Codepen

Upvotes: 1

Related Questions