[Javascript] DOM에서 노드 삭제하기

노드를 삭제할 때 먼저 기억해둬야 할 것은 부모 노드에서 자식 노드를 삭제해야 한다는 것이다.

즉, 삭제해야 할 노드가 있다면 반드시 부모 노드부터 찾아야 한다는 뜻이다.

 

* parentNode 프로퍼티

parentNode 프로퍼티는 현재 노드의 부모 노드에 접근해서 부모 노드의 요소 노드를 반환한다.

- 기본형 : 노드.parentNode

예를 들어 li 노드의 2번째 요소의 부모 노드를 알고 싶다고 하면

document.querySelectorAll("li")[1].parentNode;

다음과 같은 코드로 부모 노드를 찾을 수 있다.

 

* removeChild() 메서드

removeChild() 메서드는 자식 노드를 삭제하는 역할을 한다.

부모 노드만 찾는다면 removeChild() 메서드를 사용하는 것은 간단하다.

- 기본형 : 부모노드.removeChild(자식노드)

예를 들어 li 노드를 삭제하려면 li의 부모 노드에서 삭제해야 하므로 다음과 같이 작성하면 된다.

li.parentNode.removeChild(li);