[JS] 여러 개의 button이 같은 event, function을 실행할 때 버튼 구분하는 법

여러 개의 버튼이 같은 event를 기다리고, 같은 function을 실행할 때, 버튼을 구분하기 위해서는 다음과 같은 방법들을 사용할 수 있다.

 

1. 버튼 각각에 다른 id를 부여하여 각각의 버튼을 구분

2. 버튼 각각에 다른 class를 부여하여 각각의 버튼을 구분

3. event.target.name을 사용하여 버튼 각각에 이름을 부여하고 각각의 버튼을 구분

4. 다른 함수를 따로 만들어 각각의 버튼을 구분

5. event.target.parentElement를 사용해서 해당 버튼의 부모요소에 접근해 구분

 

이 중 제일 효율적인 방법은 5번

리스트마다 버튼을 넣은 상황에서 버튼을 누르면 해당 리스트가 삭제될 수 있도록 작성하려고 한다.

function deleteList(event) {                    // argument 입력(보통 event라고 적음)
    const li = event.target.parentElement;      // 버튼의 부모요소 접근하고 변수에 넣음
    li.remove();                                // 삭제
}

button.addEventListener("click", deleteList);   // 버튼 클릭 시 삭제되도록 event 삽입

target은 클릭된 element, parentElement는 부모요소를 말한다.

즉, 클릭된 element(버튼)의 부모요소인 li를 변수로 지정하고, 변수에 remove 함수를 사용하여 버튼을 클릭 시 삭제될 수 있도록 한다.