요소 삭제하기

요소의 모든 하위 요소들을 삭제하는 clear(elem) 이라는 함수를 만들어 보세요.

<ol id="elem">
  <li>Hello</li>
  <li>World</li>
</ol>

<script>
  function clear(elem) { /* 여기에 코드를 작성하세요. */ }

  clear(elem); // elem 내부 리스트를 삭제합니다.
</script>

먼저 잘못된 방법부터 살펴보겠습니다.

          function clear(elem) {
  for (let i=0; i < elem.childNodes.length; i++) {
      elem.childNodes[i].remove();
  }
}
        

remove()는 elem.childNodes을 변화시키기 때문에 반복문을 실행할 때마다 0 번째 인덱스부터 시작해야만 합니다. 그러나 i 는 계속해서 증가하므로, 결국 일부 원소들을 지나치게 됩니다.

for..of 반복문에도 역시 같은 문제가 있습니다.

올바른 방법은 다음과 같습니다.

          function clear(elem) {
  while (elem.firstChild) {
    elem.firstChild.remove();
  }
}
        

같은 동작을 수행하는 더 쉬운 방법도 있습니다.

          function clear(elem) {
  elem.innerHTML = '';
}
        