본문 바로가기

Javascript/DOM과 HTML 제어

remove() 와 removeChild() 의 차이

반응형

remve() 와 removeChild() 는 기본적으로 같은 기능을 합니다.

다만, 사용하는데 있어서 몇가지 사소한 차이점들이 있습니다.


차이점 

remove() 

removeChild() 

인터넷 익스플로러

미지원 

지원 

부모 엘리먼트 

불필요 

필요 

반환값

없음 

삭제한  노드 참조 반환.

노드 리스트 삭제

미지원 미지원 

하위 노드 삭제

지원

지원


remove() 는 노드를 메모리에서 삭제하고 종료합니다. 하는데 반해, 

반면 removeChild()는 노드를 삭제하는 것이 아닙니다. 

메모리에 해당 노드는 그대로 존재하며, 부모 노드와의 부모-자식관계를 끊어 DOM 트리에서 해제하는 것입니다. 최종적으로는 관계를 끊은 해당 노드의 참조를 반환합니다.


반환값을 변수에 저장하지 않으면 삭제하는 노드의 참조가 더이상 없기 때문에, 자바스크립트 엔진의 GC(Garbage Collection)에 의해 잠시 후 메모리에서 삭제됩니다.

반환된 노드 참조를 변수에 담아 다른 DOM 위치에 붙일 수 있습니다.


예를 들어


let delli = document.querySelector('#friends');
let ret = delli.parentNode.removeChild(delli);
document.body.prepend(ret);


이렇게 삭제한 노드의 반환값을 다른 노드에 붙여서 노드의 위치를 이동하는 작업에 사용할 수 있습니다.


노드를 삭제하면 삭제하는 노드 하위에 있는 자식 노드들도 모두 삭제됩니다.

노드들은 부모/자식 관계로 트리 구조로 연결되어 있기 때문에 부모 노드가 삭제되면, 자식 노드도 자동으로 삭제됩니다.


반응형

닫기