[JS] remove와 empty의 차이

<div class="inner">
    <span>제목</span>
    <button>버튼</button>
</div>

여기 <div> 태그 안에 있는 내용을 비우고 새로운 값을 넣으려고 하는데 $(".inner").remove() 했더니 아예 값이 지워져서 추가가 안됐다.

---

remove()

선택한 요소를 DOM에서 제거. 즉, 선택한 요소와 하위 요소들을 모두 삭제

$(".inner").remove();

 

empty()

선택한 요소의 내용만을 제거. 즉, 선택한 요소의 자식 요소들을 삭제

$(".inner").empty();

---

 

 

정리하자면,

해당 요소를 지우고 싶을 땐 remove()

자식 요소만 지우고 싶을 땐 empty()를 사용