JavaScript 요소 제거가 왜 그렇게 복잡한가요? 그리고 어떻게 단순화할 수 있나요?

JavaScript에서 요소 제거 단순화

부모 노드를 찾아 수동으로 요소를 제거하는 JavaScript의 요소 제거 방법은 다음과 같습니다. 번거롭다. JavaScript가 왜 이런 방식으로 설계되었는가?

기술적인 이유가 있을 수 있지만 한 가지 해결책은 기본 DOM 기능을 강화하는 것입니다. 이 접근 방식은 모든 경우에 이상적인 것은 아니지만 최신 브라우저에서 잘 작동합니다.

Polyfill 메서드

다음 코드를 사용하면 Element 및 NodeList 프로토타입을 확장할 수 있습니다. 제거 메소드를 포함하려면:

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

이 확장을 사용하면 요소 제거가 다음과 같이 간단해집니다. as:

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

또는:

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

이 솔루션은 최신 브라우저에서 효과적으로 작동하지만 Internet Explorer 7 이하 버전은 지원하지 않습니다.

최신 브라우저 솔루션

다행히 최신 브라우저(IE 제외)에는 node.remove() 함수. 이 기능을 사용하면 폴리필 없이 요소를 직접 제거할 수 있습니다.

node.remove()를 사용하려면:

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

또는:

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

이 접근 방식은 Chrome, Firefox, Edge 및 Safari를 포함한 모든 주요 브라우저에서 지원됩니다.

위 내용은 JavaScript 요소 제거가 왜 그렇게 복잡한가요? 그리고 어떻게 단순화할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!