[JS] 삭제하기 이벤트 - 최소 하나의 행은 남겨두기!

기존에 조건이 안 걸려있던 코드 : 행을 남겨두지 않고 모두 삭제

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

 

조건을 걸었지만 작동이 안된 코드 : 접근이 잘못 됐었다.

//삭제 이벤트 
document.addEventListener("click", function(event) {
  if (event.target.classList.contains("del_Btn1")) {
    var delBtn1 = event.target.closest("tr");
        if(delBtn1 > 0) {
           alert("마지막 행은 삭제할 수 없습니다.")
        } else {
           delBtn1.remove();
        }
     }
});

이 코드에서 문제가 발생하는 이유는 delBtn1을 비교할 때 올바른 조건을 사용하지 않았기 때문이다. delBtn1은 HTMLCollection이 아니라 DOM 요소다. 따라서 delBtn1을 비교하기 전에 tableBody의 자식 요소의 개수를 확인하여 마지막 행인지 아닌지를 판단해야 한다!

밑에는 수정한 코드@~@!!

 

---

 

 

남겨진 마지막 행은 삭제하지 못하도록 조건 걸기 : 최소 하나의 행은 남겨두기!

//삭제 이벤트 
document.addEventListener("click", function(event) {
  if (event.target.classList.contains("del_Btn1")) {
    var delBtn1 = event.target.closest("tr");
    var tableBody = document.querySelector("tbody");
    var rowsCount = tableBody.children.length;
    if (rowsCount > 1) {
      delBtn1.remove();
    } else {
      alert("마지막 행은 삭제할 수 없습니다.");
    }
  }
});

 

위의 코드는 tableBody 의 자식 요소 개수를 rowsCount로 가져와 마지막 행인지 확인한 후, 삭제할지 여부를 결정해야 한다. 만약 마지막 행이라면 알림 창을 띄우고, 그렇지 않으면 해당 행을 삭제한다.

 

해결완료~