ajax로 삭제기능 구현하기 질문입니다

[양진석]

<script>
    document.querySelectorAll('.delete')[0].addEventListener('click', () => {
        fetch('/abc?id=<%=글목록[0]._id%>', {
            method: 'DELETE',
        });
    });
    document.querySelectorAll('.delete')[1].addEventListener('click', () => {
        fetch('/abc?id=<%=글목록[1]._id%>', {
            method: 'DELETE',
        });
    });
    document.querySelectorAll('.delete')[2].addEventListener('click', () => {
        fetch('/abc?id=<%=글목록[2]._id%>', {
            method: 'DELETE',
        });
    });
</script>

위와 같은코드를 for를 사용해서 수정했더니 "i is not defined"라는 오류가 발생했습니다.

<script>
            for (let i = 0; i < '<%=글목록.length%>'; i++) {
                document.querySelectorAll('.delete')[i].addEventListener('click', () => {
                    fetch('/abc?id=<%=글목록[i]._id%>', {
                        method: 'DELETE',
                    });
                });
            }
        </script>

검색해봤더니 script 태그 안에서 생성한 let i는 ejs 템플릿의 글목록 배열에 접근할 수 없다고 합니다. 영상에서는 for로 축약할 수 있다고 하셨는데.. 그 힌트를 얻고 싶습니다.

[codingapple]

아마 script 태그 안에서 자바스크립트 반복문말고 ejs 반복문으로 코드복붙하면 i 쓸 수 있을듯요

[양진석]

<script>
    let length = '<%=글목록.length%>';
    '<% for (let i = 0; i < length; i++) { %>'
        document.querySelectorAll('.delete')[i].addEventListener('click', () => {
            fetch('/abc?id=<%=글목록[i]._id%>', {
                method: 'DELETE',
            });
        });
    '<% } %>'
</script>

이렇게 수정해봤는데도 똑같은 오류가 발생합니다..

[codingapple]

그냥 강의처럼 삭제버튼마다 data-id=""로 _id 숨겨놓고 클릭할 때 가져오면 반복문필요없습니다

[글쓴이]

글