Dom addEventListener

addEventListener

동작안됨

선택된 태그의 부모 엘리먼트를 지워주기 위해 querySelector로 deleteMsg를 가져오고 해당 엘리먼트에 클릭 이벤트를 주었지만, 제대로 동작하지 않았다.
실수했던 부분은 querySelector는 여러 엘리번트 중 첫 번째 엘리먼트를 반환해 준다는 것이다. 때문에, 가장 처음의 deleteMsg button태그에만 클릭이벤트가 등록되는 것이었다.

이 문제를 해결하기 위해, querySelectorAll로 모든 deleteMsg를 가져와 Array.from()으로 배열화시켜주는 방법으로 진행하려고 했지만, 이 방법도 적절한 방법이 아닌 것 같았다. 그래서 찾아보니 엘리먼트를 생성할 때 클릭 이벤트를 붙여주는 방법이 있었다.

const deleteMsg = document.querySelector('.deleteMsg')

...

deleteMsg.addEventListener('click',onDeleteMsg)

🌈동작됨

그래서 아래와 같이 새로 생성된 btn 엘리먼트마다 클릭이벤트를 등록해 주었다.

btn를 생성할 때 이벤트를 등록하여 사용하는 것이다. 그러면 각각의 btn은 click이벤트를 가지고 있고, event target에 맞게 실행될 수 있었던 것이다.

function nameNmessage() {
  let btn = document.createElement('button');
  let up = document.createElement('button');
...
  btn.classList.add('deleteMsg');
  up.classList.add('good');
...
  btn.textContent = 'Del';
  up.textContent = 'UP';
...
  div.append(div2, p);
  li.append(div, span, btn, up);

  btn.addEventListener('click', deletecomment);
  up.addEventListener('click', (e) => upToggle(e, up));

  return li;
}

소스코드) solo-work/dompractice