[javascript] 자바 스크립트 DOM 제거 요소

대부분의 브라우저에는 .removeChild(element)부모를 호출 하는 것보다 DOM에서 요소를 제거하는 약간 더 간결한 방법이 element.remove()있습니다. 물론 이것은 DOM에서 요소를 제거하는 표준적이고 관용적 인 방법이 될 것입니다.

이 .remove()방법은 2011 년 DOM Living Standard에 추가되었습니다 ( 커밋 )에 추가되었으며 이후 Chrome, Firefox, Safari, Opera 및 Edge에서 구현되었습니다. 모든 버전의 Internet Explorer에서는 지원되지 않습니다.

오래된 브라우저를 지원하려면 브라우저를 연결해야합니다. 이 메소드를 포함하는 다목적 DOM shim을 만든 사람이없고 단일 프로토 타입에 메소드를 추가하는 것이 아니기 때문에 약간 짜증나는 것으로 밝혀졌습니다. 이 메소드 ChildNode는 스펙에 의해 정의 된 인터페이스 일 뿐이며 JavaScript에 액세스 할 수 없으므로 프로토 타입에 아무것도 추가 할 수 없습니다. 따라서 ChildNode브라우저에서 상속되고 실제로 정의 된 모든 프로토 타입을 찾아서 추가 .remove해야합니다.

IE 8에서 작동하는 것으로 확인한 shim이 있습니다.

(function () {
    var typesToPatch = ['DocumentType', 'Element', 'CharacterData'],
        remove = function () {
            // The check here seems pointless, since we're not adding this
            // method to the prototypes of any any elements that CAN be the
            // root of the DOM. However, it's required by spec (see point 1 of
            // https://dom.spec.whatwg.org/#dom-childnode-remove) and would
            // theoretically make a difference if somebody .apply()ed this
            // method to the DOM's root node, so let's roll with it.
            if (this.parentNode != null) {
                this.parentNode.removeChild(this);
            }
        };

    for (var i=0; i<typesToPatch.length; i++) {
        var type = typesToPatch[i];
        if (window[type] && !window[type].prototype.remove) {
            window[type].prototype.remove = remove;
        }
    }
})();

IE 7 이하에서는 작동하지 않습니다. IE 8 이전에는 DOM 프로토 타입을 확장 하지 않습니다 . 그러나 2015 년 직전에 대부분의 사람들은 그런 것들에 신경 쓸 필요가 없다고 생각합니다.

shim을 포함하면 element간단히 호출하여 DOM에서 DOM 요소를 제거 할 수 있습니다.

element.remove();

답변

function purge(d) {
    var a = d.attributes, i, l, n;
    if (a) {
        for (i = a.length - 1; i >= 0; i -= 1) {
            n = a[i].name;
            if (typeof d[n] === 'function') {
                d[n] = null;
            }
        }
    }
    a = d.childNodes;
    if (a) {
        l = a.length;
        for (i = 0; i < l; i += 1) {
            purge(d.childNodes[i]);
        }
    }
}

var leftSection = document.getElementById('left-section');
leftSection.parentNode.removeChild(leftSection);

$('#left-section').remove(); //using remove method in jQuery

$("#foo").remove();

$("#foo").detach();