JavaScript에서 HTML 요소를 효율적으로 제거하려면 어떻게 해야 합니까?

간편한 요소 제거: NativeDOM 및 node.remove() 탐색

JavaScript에서 HTML 요소를 제거하는 작업을 수행할 때 오랫동안 인지된 이상함: 먼저 상위 노드를 선택해야 합니다. 최근까지 표준 방식에는 다음 코드가 필요했습니다.

var element = document.getElementById("element-id");
element.parentNode.removeChild(element);

향상된 접근 방식

최신 브라우저의 경우 기본 DOM 기능을 보강하면 더 많은 느낌을 주는 솔루션을 제공합니다. 직관적:

Element.prototype.remove = function() {
    this.parentElement.removeChild(this);
}
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
    for(var i = this.length - 1; i >= 0; i--) {
        if(this[i] && this[i].parentElement) {
            this[i].parentElement.removeChild(this[i]);
        }
    }
}

이제 요소를 제거하는 것은 Breeze:

document.getElementById("my-element").remove();

또는

document.getElementsByClassName("my-elements").remove();

node.remove()의 승리

최근 업데이트에서는 node.remove( )가 이 작업의 구세주로 등장했으며, 다음을 제외한 모든 최신 브라우저에서 사용할 수 있습니다. IE:

document.getElementById("my-element").remove();

또는

[...document.getElementsByClassName("my-elements")].map(n => n && n.remove());

이러한 솔루션은 IE 7 이하에서는 작동하지 않을 수 있지만 DOM에서 요소를 제거하는 훨씬 더 부드럽고 논리적인 방법을 제공합니다. 보다 효율적이고 간단한 코딩 경험을 제공합니다.

위 내용은 JavaScript에서 HTML 요소를 효율적으로 제거하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!