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

JavaScript에서 ID로 요소 제거: 편리한 대안

JavaScript에서 요소를 제거하는 표준 방법은 상위 노드까지 순회해야 합니다.

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

이 접근 방식에는 상위 항목에 액세스하기 위한 추가 단계가 필요하므로 비효율적일 수 있습니다. 이 기사에서는 Element 프로토타입에 제거 메소드를 추가하여 요소 제거를 단순화하는 대안을 살펴봅니다.

Element 및 NodeList 프로토타입을 확장하면 모든 HTML 요소와 컬렉션에 제거 메소드를 도입할 수 있습니다.

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]);
        }
    }
}

이제 추가 기능을 통해 요소를 직접 제거할 수 있습니다.

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

또는 여러 요소에 대해 요소:

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

참고: 이 솔루션은 IE 7 이하에서는 지원되지 않습니다.

업데이트(2019): Node.js node.remove() 함수를 도입하여 요소 제거를 균일하게 만들었습니다. 더 간단함:

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

또는 컬렉션의 경우:

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

이 업데이트된 접근 방식은 Chrome, Firefox, Edge 및 Safari를 포함한 최신 브라우저에서 널리 지원됩니다.

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