Jquery :: 1 .empty() 텍스트 비우기

웹쪽을 이제 막 배우는 입장이다 보니 JQUERY 를 사용하다가 이해가 안되거나 한번더 다시 볼 필요가  있는 경우 에 포스팅을 해보려 합니다

회사에서 운영중인 모바일 페이지중 댓글을 infinite scroll 하는 작업이 추가가 되어서 partialview 를 이용해 infinite scroll 을 해주는 작업을 

구글신의 도움을 통해 구현을 다해서 테스트를 하는중 뜻하지 않는 버그(?) 가 발생했다

처음 로드시 스크롤을 통한 댓글들이 정상으로 보였는데  댓글을 추가할시 추가한댓글을 리스트에 다시 바인딩 될때 기존 바인딩되었던

데이터에 추가가 되어서 나오게된것이었다 즉,

1 ~ 10 번째 댓글 

11 ~ 20 번째 댓글

21 ~ 30 번째 댓글

이상태에서 댓글을 추가를 하면 

1 ~ 10 번째 댓글

11 ~ 20 번째 댓글

21 ~30 번째 댓글

1 ~ 10 번째 댓글

11 ~ 20 번째 댓글

21 ~30 번째 댓글

31 ~ 번쨰 댓글  

이런식으로 데이터가 출력이 되는걸 확인이 되었다 

그래서 이전에 있던 데이터를 어떻게 지우고 다시 바인딩데이터를 뿌리나 한참을 찾다가 찾아낸사실..

기존에 데이터를 바인딩을 할때는 

("#CommentList").append(htmlString);

기존 데이터에 htmlString 을 append 시켜주는 식으로 추가를 해주었다 댓글이 추가 되거나 삭제 되었을때의 상황을 생각을 못하고

무작정 스택오버플로우의 코드를 복사를 하니 이런일이...

("#CommentList").empty().append(htmlString);

그래서 찾아낸 방법이 jqery 메서드중에 .empty() 라는 메서드가 있는데

DOM 에 조건이 일치하는 요소들의 자식들을 제거를 한다 

기존 <div id= "CommentList">  에 바인딩 되어있는 데이터를 제거를 한후 다시 htmlString 을 바인딩 시키는 작업을 한다