자바스크립트 remove vs removeChild 차이점

JavaScript에서 remove()와 removeChild() 메소드는 DOM(Document Object Model)에서 요소를 제거하는 데 사용됩니다. 그러나 두 메소드는 약간의 차이가 있습니다.

 

 

removeChild()

 

removeChild() 메소드는 지정된 부모 요소의 자식 요소 중 하나를 제거합니다. 예를 들어, 다음과 같이 body 요소의 첫 번째 자식 요소를 제거할 수 있습니다.

 

var parent = document.getElementsByTagName("body")[0];
var child = parent.childNodes[0];
parent.removeChild(child);

 

removeChild() 메소드는 반드시 지정된 부모 요소의 자식 요소 중 하나를 제거해야 합니다. 즉, 매개변수로 전달되는 요소는 반드시 부모 요소의 자식 요소여야 합니다.

 

 

remove()

 

remove() 메소드는 지정된 요소를 제거합니다. 예를 들어, 다음과 같이 body 요소를 제거할 수 있습니다.

 

var element = document.getElementsByTagName("body")[0];
element.remove();

 

remove() 메소드는 매개변수로 단일 요소를 받으며, 지정된 요소를 바로 제거합니다.

 

remove() 메소드는 또한 NodeList 객체나 Array 객체도 매개변수로 받을 수 있습니다. 이 경우 NodeList이나 Array에 포함된 모든 요소가 제거됩니다.

 

var elements = document.querySelectorAll("p");
    elements.forEach(function(element) {
    element.remove();
});

 

위 코드는 모든 p 요소를 제거합니다.

 

 

결론

 

결론적으로, remove() 메소드는 removeChild() 메소드보다 더 유연하며, 다양한 유형의 매개변수를 받을 수 있습니다. 그러나 removeChild() 메소드는 특정 부모 요소의 자식 요소 중 하나를 제거할 때 더 빠르게 작동합니다.