노드 삭제, 이동

node.remove() 사용하면 노드를 삭제할 수 있다.

<style>
.alert {
  padding: 15px;
  border: 1px solid #d6e9c6;
  border-radius: 4px;
  color: #3c763d;
  background-color: #dff0d8;
}
</style>

<script>
  let div = document.createElement('div');
  div.className = "alert";
  div.innerHTML = "<strong>안녕하세요!</strong> 중요 메시지를 확인하셨습니다.";

  document.body.append(div);
  setTimeout(() => div.remove(), 1000);
</script>

<div id="first">First</div>
<div id="second">Second</div>
<script>
  // remove 메서드를 호출할 필요가 없습니다.
  second.after(first); // id가 second인 노드를 가져오고, 해당 노드의 뒤에 id가 first인 노드를 삽입
</script>

append,prepend,before,after메소드들은 기본적으로 요소노드를 이동시키는 기능을 한다.

생성한 요소노드를 DOM에 추가하는 개념이 아니고 DOM으로 이동시키는 개념이다.

elem.remove() 주의사항

DOM에 변경사항이 발생하면 바로 갱신된다.

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

remove()로 노드가 삭제되면 DOM은 바로 갱신되기때문에 삭제전 인덱스가 1이었던 노드가 0이 되어 지나치는 노드가 있게된다.

---

elem.innerHTML=''; 내부에있는 노드들을 삭제하는것과 같다.