[js] remove(), empty() 함수 차이

제이쿼리로 remove(), empty() 메소드 구현하면 차이가 있다.

 

$(dom).remove()

dom 과 하위 요소를 전부 제거한다.

제거된 요소는 JQuery 데이터 형태로 유지되지만, 제거된 요소와 하위 요소들의 데이터, 이벤트는 전부 제거된다.

 

$(dom).empty()

dom의 하위요소(텍스트 포함)들을 제거한다.

자식 요소들의 데이터, 이벤트도 함께 제거된다.

제거된 요소가 데이터로 유지되지 않는다.

 

 

프로젝트를 하면서 remove() 를 사용하니 <li> 태그가 완전히 없어지지 않았다. 예를 들어 <li>를 3개 생성했다가 remove()로 제거하니 이전에 지웠던 <li> 3개가 텍스트 같은 것들은 없어졌지만 (공백)공간이 어느정도 남아있는 것처럼 보였다. 그 상태로 append()로 <li>태그를 추가하니까 앞에서 말한 공간 밑에 li 내용들이 추가되었다. 그래서 이런 문제를 해결하려면 remove 대신 empty를 사용하면 된다.