자바스크립트 li태그 선택 - 실시간 댓글 삭제

댓글 / hover시 삭제 아이콘

// template pug 사용
// comment.pug 예시 
ul#jsCommentList                    // ul태그의 id는 jsCommentList
  each comment,index in video.comments     // db에서 comment(댓글) 가져옴
    li(data-index=index)               // index를 줄 수도 있음
      span = comment.text // comment db에 저장된 댓글 내용
      button.comment-delete 삭제
      button.comment-modify 수정


// 위의 each문으로 생성된 comment 예시 문
ul#jsCommentList
  li
    span = "첫 번째 댓글"
    button.comment-delete 삭제
    button.comment-modify 수정
  li
    span = "두 번째 댓글"
    button.comment-delete 삭제     <- 너를 선택해서 삭제하고 싶다
    button.comment-modify 수정
  li
    span = "세 번째 댓글"
    button.comment-delete 삭제
    button.comment-modify 수정

 

위와 같이 있다고 가정하여 두 번째 댓글의 button을 선택하여 ajax 등을 이용하여 삭제하고 싶다하면 방법은 간단하다.

 

const commentList = document.getElementById("jsCommentList")


function deleteComment(li) {
	commentList.removeChild(li)
}

function handleDelete(event) {
  // 가져온 li 선택하여 하고자하는 기능 만들면 됩니다.
  // 예를 들어 선택한 li태그를 ajax를 이용하여 선택한 댓글을 DB에서 삭제처리하고 실시간으로 선택한 li 태그를 삭제하고싶다면
 
  const li = event.target.closest('ul') 이런식으로 삭제하려는 li 전체 태그를 받아와 삭제시킬 수 있음
  deleteComment(li)
}


fucntion init() {
    const deleteComment = document.getElementByClassName("comment-delete")
    for( var i=0; i< deleteComment.length; i++) {
    	commentList[parseInt(i)].addEventListener('click' , handleDelete)
    }
}

if(commentList) {
	init()
}

deleteComment라는 변수에 comment-delete 클래스를 getElementByClassName을 이용하여 가져옴

반복문으로 내가 선택한 button에 "click" 이벤트가 발생했을 때, listener 실행( 함수 실행 )