addComment.js ( submit시 요소 추가 )

mport axios from "axios"; let commentForm = document.querySelector(".video__comments-input"); let commentList = document.querySelector(".video__comments-list"); let commentNumber = document.querySelector(".video__comments span"); let commentLoggedName = document.querySelector(".video__comments-throw"); let sendComment = async (comment, name) => { let videoId = window.location.href.split("/videos/")[1]; let response = await axios({ url: `/api/${videoId}/comment`, method: "POST", data: { comment } }); if (response.status == 200) { addComment(comment, name); } }; let increaseComment = () => { commentNumber.innerHTML = parseInt(commentNumber.innerHTML) + 1; }; let addComment = (comment, name) => { let li = document.createElement("li"); let button = document.createElement("button"); let commentText = document.createElement("span"); let commentName = document.createElement("span"); commentName.innerHTML = name; commentText.innerHTML = comment; button.innerHTML = "❌"; li.appendChild(commentName); li.appendChild(commentText); li.appendChild(button); commentList.prepend(li); increaseComment(); }; let handleSubmit = event => { event.preventDefault(); let commentInput = commentForm.querySelector("input"); let comment = commentInput.value; sendComment(comment, commentLoggedName.id); commentInput.value = ""; }; function init() { commentForm.addEventListener("submit", handleSubmit); } if (commentForm) { init(); }


deleteComment.js ( 버튼 클릭시 요소 제거 )

import axios from "axios"; let commentNumber = document.querySelector(".video__comments-number"); let deleteButton = document.querySelectorAll(".video__comments-list button"); function decreaseNumber() { commentNumber.innerText -= 1; } function deleteComment(event) { event.target.parentNode.remove(); } async function handleClick(event) { let commentId = event.target.id; let response = await axios({ url: `/api/${commentId}/delete-comment`, method: "POST" }); if (response.status == 200) { deleteComment(event); decreaseNumber(); } } function init() { deleteButton.forEach(function(el) { el.addEventListener("click", handleClick); }); console.log(deleteButton); } init();


addComment.js 에서 코멘트를 작성 후 submit 한 뒤

삭제 버튼을 누르면 바로 삭제가 되지 않고 새로고침을 해야지 정상적으로 삭제가 됩니다.

스크린샷을 보시다 싶이

let deleteButton = document.querySelectorAll(".video__comments-list button");

에 코멘트 작성 즉시 바로 버튼들이 추가가 되지 않고 서로 다른 파일이라서 새로고침을 해야지 요소들이 추가가 됩니다.

어떻게 해야지 addComment.js 에서 요소가 추가되고 난 후 deleteComment.js 에서

버튼이 추가됬다는걸 인지 할 수 있을까요?