빈 리스트에서의 에러 발생

현재 수강중인 영상: AJAX로 삭제요청하기 3 (jQuery를 이용한 UI 기능) & 여러가지 응답방법

> 여기서 영상에서 강의해주신 삭제 구현은 모두 성공적으로 마쳤습니다.

> 다만, 계속 삭제하다가 리스트 크기가 0이 되었을 때, 에러가 발생합니다. (에러는 하단에 첨부)
(spots.ejs가 영상속에서 list.ejs와 동일합니다)

제 생각으로는 for문을 사용하는 부분에서 발생하는 것 같은데, 이유를 잘 모르겠습니다.
혹은 사이즈가 0인 리스트에서 굳이 읽으려고 하다 보니 발생하는 오류인 것 같습니다.
0인 경우 예외처리를 하는 구문을 넣어야 할까요?

<ul class="list-group">
        <% for (var i = 0; i < spots.length; i++){ %>
        <li class="list-group-item">
          <p>spot Id: <%= spots[i]._id %></p>
          <p>spot Name: <%= spots[i].spot_name %></p>
          <p>spot Desc: <%= spots[i].spot_desc %></p>
          <button class="delete" data-id="<%= spots[i]._id %>">삭제</button><br>
        </li>
        <% } %>
      </ul>
 

---