[JS] 삭제하기 이벤트 오류잡기!!!!

이상하게 작동하던 코드 1 - (이건 첫번째 행 버튼 두번 누르면 alert 뜨면서 그제서야 밑에 행들 삭제 가능)

때에 따라 맞게 작동하기도 할것임

//삭제 이벤트 1
function del_Btn() {
  let delEvent = document.querySelectorAll(".del_Btn");

  for (let i = 0; i < delEvent.length; i++) {
    delEvent[i].addEventListener("click", function () {
      let parent = document.querySelector(".parentTbody");
      if (i > 0) {
        parent.removeChild(this.parentElement.parentElement);
      } else {
        alert("마지막 행은 삭제할 수 없습니다.");
      }
    });
  }
}

 

이상하게 작동하던 코드 2 - (이건 첫번째 행만 삭제되고 밑으로 추가되는 행은 작동 x)

때에 따라 맞게 작동하기도 할것임

//삭제 이벤트 1
document.querySelector(".del_Btn").addEventListener("click", function() {
  var delBtn = document.querySelector(".del_Btn").closest("tr");
  delBtn.remove();
});

 

---

 

에러가 났던 이유는 내가 동적으로 행이 생성되게 해놨는데 새로 추가되는 행에 붙어 있는 삭제버튼이 각 작동하게 하려고 하다보니 위의 코드들이 내가 원하는 대로 작동되지 않았던 것 같다. (분명 저렇게 하면 되는 코드들도 있다.)

예) 추가버튼을 누르면 이렇게 동적으로 row가 추가되게 해놨는데 각 행에 있는 삭제 버튼이 모두 작동하게 하고싶었다.

 

 

드디어 정상 작동하는 코드!!! (자바스크립트 코드임)

//삭제 이벤트 1
document.addEventListener("click", function(event) {
  if (event.target.classList.contains("del_Btn")) {
    var delBtn = event.target.closest("tr");
    delBtn.remove();
  }
});

설명1 → 위 코드는 document 객체에 클릭 이벤트를 추가하고, 클릭된 요소의 클래스를 확인하여 "del_Btn" 클래스를 가진 요소를 찾아 해당 요소가 속한 행을 삭제한다. 이렇게 수정하면 동적으로 추가된 모든 삭제 버튼이 작동하게 됩니다.

설명2 → addEventListener 메서드를 사용하여 클릭 이벤트 리스너를 문서 객체에 연결한다. 클릭 이벤트가 발생하면 클릭된 요소가 del_Btn 클래스를 가지고 있는지 확인한다. (classList.contains()) 해당 클래스를 가지고 있다면 closest("tr")을 사용하여 가장 가까운 "tr" 요소(상위 행)를 찾고, remove() 메서드를 사용하여 해당 요소를 DOM에서 제거한다!

 

 

이참에 addEventListener공부 다시....배운거 다 까먹었다ㅠ