240716 TO DO LIST - 트러블 슈팅

💫 링크

만들고 싶었던 거
1. TO DO LIST 할 일 추가
2. 완료된 할 일을 DONE LIST로 옮기기 (잘못 옮긴경우 DONE LIST->TO DO LIST로 옮기기)
3. TO DO LIST(DONE LIST) 삭제

TO DO LIST에서 완료 된 목록을 DONE LIST로 옮기고 싶었는데 여기서 멘붕이..ㅠ
한 줄씩만 옮기고 싶은데 목록 전체가 옮겨졌다.

 $('#todo-list').last().click(function () ~

요거를

 $('#todo-list li').last().click(function () ~

요렇게 뒤에 li 추가해줬더니 해결됐다 신기하다...👶

            // 투두 리스트 삭제
            $('#todo-listUl').on('click', '.deleteBtn', function (event) {
                $(this).parent().remove();
                event.stopPropagation();
            });

            // 투두 -> 완료
            $('#todo-listUl').on('click', 'li', function () {
                $('#doneListUl').append($(this));
            });

            
            // 완료 리스트 삭제
            $('#doneListUl').on('click', '.doneDeleteBtn', function (event) {
                $(this).parent().remove();
                event.stopPropagation();
            });

            // 완료 -> 투두
            $('#doneListUl').on('click', 'li', function () {
                $('#todo-listUl').append($(this));
            });

투두리스트 삭제는 되는데 완료 리스트 삭제는 안돼서 이거만 붙들고 있다가
튜터님께 조언을 구하고 힌트 얻어서 해결..감사합니다😭

let temp_html = `<li id="todo-listLi">${inputValue}<button class= "deleteBtn doneDeleteBtn button is-danger" id="deleteBtn">삭제</button></li>`;

class 부분에 doneDeleteBtn 를 추가해주니 해결됐다.
하고나니 엄청 쉬운거였는데 왜 안 보였을까 😥