[JavaScript] html 객체 내부를 비우는 empty 함수 (jquery 를 vanilla js로)

- 어떤 요소의 내부 비우기 - 

html에서 어떤 요소를 나중에 채워야 할 때가 있다.
예를 들어서 서버에서 어떤 데이터를 불러와서,
그때그때 화면에 뿌려줘야 할 때도 그렇다.

특히 tbody 나 div 태그 등에서 자주 쓴다.
내부를 비우거나 새로운 요소로 채우거나 한다.
댓글을 지우거나, 버튼을 추가하는 등
어떤 동작이 일어날 때마다
특정 요소 안을 비우고 다시 채워야 할 때가 있다.

 

- jQuery 로 비우기 -

이럴 때 어떤 태그의 내부를 어떻게 비울 수 있을까?
jQuery라면 간단하다.
아래 함수를 사용하면 내부 요소들을 지워준다.

$('selector').empty();

 

- Vanilla js 로 비우기 -

JavaScript 만으로 지울 수 없을까?
한 번에 지우는 함수는 따로 없는 것 같다.
대신 반복문을 돌려야 한다.

안을 비우고 싶은 요소에 접근한 뒤에,
그 요소 안에 하위 요소가 있는지 확인하다.
만약에 하위 요소가 있다면, 그 하위 요소를 지운다.
이 과정을 반복한다.
예를 들어서 tbody 태그 안을 비운다면 아래와 같다.

const tb= document.querySelector('tbody#cartListBody');
while (tb.firstChild) { 
    tb.removeChild(tb.firstChild);
}

 

- 코드 작동 과정 설명 -

tb는 tbody 태그이고, 이 요소 안을 비우려고 한다.
여기서 tb.firstChild 라는 속성에 접근하는 부분이 보인다.
firstChild 속성은 무엇일까?
크롬 익스플로러에서 개발자 모드(F12)를 사용하면 간단히 확인할 수 있다.

 

 

childeNodes 속성에는 NodeList 형태로 하위 요소들이 저장돼 있고,
children 속성에는 HTMLCollection 형태로 하위 요소들을 저장해 두었다.
이렇게 하위 요소들 중에 가장 첫 번째 요소가 firstChild 속성값에 들어 있다.

 

firstChild 속성 안에 어떤 값이 있다면 
tbody 는 하위 요소를 적어도 하나 이상 들고 있는 것이고,
firstChild 가 없다면 tbody는 비어 있는 상태임을 추론할 수 있다.

이러한 사실을 이용하며 while문 안에 조건식을 아래와 같이 둔다.
while (tb.firstChild) 
하위 요소가 하나라도 있다면 조건식은 true가 될 것이고,
하위 요소가 하나도 남지 않아서 조건식이 false가 될 때까지
while문을 반복할 것이다.

예시를 하나 더 보자.
아래는 select 요소 안에 있는 option 요소들을 모두 비우는 기능이다.

const sel = document.querySelector('select#sizeCategory');
while (sel.firstChild) {
sel.removeChild(sel.firstChild);
}

-220404