Solution Review: Moving a Task from To-do to Done

Solution

Explanation

• In line 2, we assign a click event handler to the done button element, which is a descendant of div with id equal to done. We use the on() method here as the done button element is dynamically created and the direct method $("#done").click() will not work.

• In line 4, we extract the parent of the done button element, which is the task to be moved.

• In line 6, we delete the done button element using the remove() method.

📝 Note: We extract the parent task element before deleting the done button element because "$("this").parent()" won’t work after removing the done button element.

• In line 8, we detach the parent task element from the DOM tree.

📝 Note: We use the detach() method instead of remove() in order to retain all the event handlers associated with the task element.

• In line 10, we finally attach the detached task element at the end of the done list using $(".completed").append(detachedTask).