이번에는 toDo를 삭제하는 button을 추가해보자
이때 button은JS에서 추가할 것이고, html에서는 이것들이 어떻게 보일지 디자인하면 된다.
span은 toDo의 텍스트를 가리키고 button은 event를 수신하고 있어야 한다.
이제 이 button에 대한 click event를 만들어보자
먼저 button을 만들어 내용을 X로 정해준 다음 li 안에 button을 추가하도록 코드를 작성했다.
새로고침 후 실행해보면 입력한 li 들 옆에 X 버튼이 함께 출력되는 것을 확인할 수 있다.
여기까지의 과정을 처음부터 정리해보면(위의 전체코드 사진 참고), 우리는 li를 만들고 span을 만들고 span의 텍스트를 변경한 다음 button을 만들고 button의 텍스트를 변경했다. 그리고 span을 li에 추가하고 button을 li에 추가했다. 이때 append는 가장 마지막에 와야 한다는 것을 기억해두자.
아직까지는 x 버튼을 눌러도 아무런 변화가 일어나지 않으니 이번에는 그걸 바꿔보자
무언가가 클릭되었는지 확인하는 방법, 즉 eventListener를 사용하여 코드를 작성해보자
이렇게 button을 클릭했을 때 deleteToDo() 함수를 실행하도록 작성하였다.
그리고 페이지에서 X 버튼을 클릭해보면, console 창에 "hi"가 출력되는 것을 확인할 수 있다.
그런데 여기서 문제는 여러 개의 li 중에 어떤 것을 클릭했는지를 모른다는 것이다.
이전에 말했던 것 처럼 우리는 클릭에 대한 정보를 갖고 있는데, 우리에겐 event에 대한 정보가 있다는 것이다.
이렇게 submit event에 대한 정보를 가졌던 것 처럼 click event에 대한 정보도 있다는 것이다.
그러므로 deleteToDo() 함수의 인자에 event를 넣은 다음 console창에 출력하여 알아보자
이제 a, b, c 를 넣어두고 차례로 클릭해보면 세 가지가 거의 똑같아 보이는 것을 알 수 있다.
여기서 제공되는 좌표를 사용할수도 있지만 이건 너무 길기 때문에 path를 보기로 했다.
path에서는 이렇게 event가 click된 위치를 알려준다는 것을 알 수 있다.
즉, 클릭 target 이 무엇인지를 체크할 수 있다는 것을 의미한다.
event는 property를 가지는데 어떤 button이 클릭되었는지를 알려준다.
그런데 console.dir() 을 사용하면 button안에 있는 더 많은 것들을 확인할 수 있다.
이렇게 다양한것들 중 parentNode 또는 parentElement 라는게 있는데, 이를 통해 이 button의 부모가 누구인지를 알 수 있다.
이제 코드를 수정한 다음(parentNode, parentElement 둘 다 가능함)
console창에서 확인해보면 클릭된 button이 어떤 것인지를 알 수 있다.
물론 클릭한 innerText가 어떤 것인지도 알 수 있다.
이제 다시 console.log() 를 사용하여 어떤 li 가 클릭된 것인지 확인하면 된다.
정리해보면 target는 클릭된 HTML element이고 모든 HTML element에는 하나 이상의 property가 존재하는데 그 중 하나가 parentElement(클릭된 element의 부모)라는 것이다.
우리가 누구를 삭제해야 하는지 알게 되었으니 이것을 li 변수에 저장한 다음 remove() 함수를 사용하여 이를 지우면 된다.
즉 toDo를 입력하여 하나의 li를 생성하고 그 옆의 X 버튼을 클릭할 때 event를 얻게 되며 event는 target을 주는데, 이때 click된 target은 button이고 그 button의 부모가 변수 li 가 되므로 toDo를 지울 수 있게되는 것이다.
'JavaScript' 카테고리의 다른 글
| Loading To Dos part 1 (0) | 2022.03.15 |
|---|---|
| Saving To Dos (0) | 2022.03.11 |
| ToDo - Set up (0) | 2022.03.05 |
| Background (0) | 2022.02.27 |
| Quotes (0) | 2022.02.27 |
