[JavaScript] 버튼(button)이 클릭된 위치 알아내기

반복적으로 동일하게 생성되는 버튼의 해당 하는 상위 태그의 정보를 어떻게 가져올까? 그래야 지울텐데

 

버튼이 클릭 되는 이벤트가 발생시, 이에 대한 target 정보를 이벤트 리스너는 가지고 있다.

 

즉, 이벤트리스너는 어떤 버튼이 click 되었는지 target을 가진다.

 

target 은 클릭된 Element를 가르킨다.

 

eventListener 함수의 event 인자를 활용한다.

 

todo list 를 만들기 위해 form 안의 input 에 입력을 하면

내용을 담을 span 과 삭제를 위한 button 을 만들어 HTML 에 삽입한다.

그리고 button은 이벤트리스너와 연결되어 해당 클릭시 해당 li를 삭제해 주어야만 한다.

하지만 여러개의 todo(HTML 상 li 태그) 가 생성되면 버튼들간 동일한 이벤트리스너를 호출해 줌으로 어떻게 해당되는 버튼이 있는 li를 찾아서 삭제시켜줄 수 있는지의 문제가 남는다.

 

함수가 실행될때의 정보를 담은 인자를 활용하자.

event

 

console.log(event) 를 통해 함수가 실행됐을때의 다양한 정보를 받아올 수 있었다.

 

 

마우스를 가져다 대자 정확히 우리가 원하는 바 대로 해당하는 li 값을 가르킨다.

event의 내부를 살펴보면 target : button 이 있고 그 안에는 parentNode : li 본인의 부모태그에 대한 정보 또한 담겨 있다.( 누가 저 button 의 부모인지)

const todoForm = document.querySelector("#todo-form");
const toDoInput = todoForm.querySelector("#todo-form input");
const todoList = document.querySelector("#todo-list");

const todoStorage = [];

function deleteToDo(event) {
  console.log(event);
}

function paintToDo(newTodo) {
  const li = document.createElement("li");
  const span = document.createElement("span");
  span.innerText = newTodo;
  const button = document.createElement("button");
  li.appendChild(span);
  li.appendChild(button);
  button.addEventListener("click", deleteToDo);
  button.innerText = "X?";
  todoList.appendChild(li);

}

function handleSubmit(event) {
  event.preventDefault();
  const newTodo = toDoInput.value;
  toDoInput.value = "";
  paintToDo(newTodo);
}

todoForm.addEventListener("submit", handleSubmit);

 

console.dir(event.target.parentNode.innerText);

각각의 text 가 출력됨을 확인할 수 있다.

 

console.dir(event.target.parentNode);

를 입력하면 해당 되는 li 태그들을 가져올 수 있다.

remove() 함수로 제거해 주면 끝이다.

function deleteToDo(event) {
  const li = event.target.parentNode;
  li.remove();
}

결과