JavaScript DOM 제거 요소

JavaScript DOM 제거 요소

DOM 요소가 존재하는지, 존재하는지, 존재하는지, 존재하는지, 존재하지 않는지 여부를 테스트하려고 합니다.

var duskdawnkey = localStorage["duskdawnkey"];
var iframe = document.createElement("iframe");
var whereto = document.getElementById("debug");
var frameid = document.getElementById("injected_frame");
iframe.setAttribute("id", "injected_frame");
iframe.setAttribute("src", 'http://google.com');
iframe.setAttribute("width", "100%");
iframe.setAttribute("height", "400");

if (frameid) // check and see if iframe is already on page
{ //yes? Remove iframe
    iframe.removeChild(frameid.childNodes[0]);
} else // no? Inject iframe
{
    whereto.appendChild(iframe);
    // add the newly created element and it's content into the DOM
    my_div = document.getElementById("debug");
    document.body.insertBefore(iframe, my_div);
}

요소가 존재하는지 확인하고 요소를 만들 수 있지만 요소를 삭제하면 작동하지 않습니다.기본적으로 이 코드가 하는 일은 버튼을 클릭하여 웹 페이지에 iframe을 삽입하는 것입니다.iframe이 이미 삭제되어 있는지 확인하고 싶습니다.하지만 어떤 이유에서인지 나는 실패하고 있다.

removeChild 부모에게 호출해야 합니다.즉, 다음과 같습니다.

parent.removeChild(child);

이 예에서는 다음과 같은 작업을 수행해야 합니다.

if (frameid) {
    frameid.parentNode.removeChild(frameid);
}

대부분의 브라우저에서는 호출보다 DOM에서 요소를 삭제하는 방법이 조금 더 간결합니다..removeChild(element)그 부모에게 전화를 걸기만 하면 된다.element.remove()이 방법은 DOM에서 요소를 삭제하는 표준적이고 관용적인 방법이 될 것입니다.

이 메서드는 2011년 DOM Living Standard(commit)에 추가되었으며 이후 Chrome, Firefox, Safari, Opera 및 Edge에 의해 구현되었습니다.Internet Explorer 버전에서는 지원되지 않습니다.

오래된 브라우저를 지원하려면 Shim을 사용해야 합니다.이것은 조금 귀찮은 일이지만, 아무도 이러한 메서드를 포함한 범용 DOM 심을 만들지 않은 것 같고, 이 메서드를 하나의 프로토타입에 추가하는 것뿐만 아니라 이 메서드를 사용하는 것도 귀찮습니다.ChildNode스펙에 의해 정의된 인터페이스일 뿐 JavaScript에 액세스할 수 없기 때문에 프로토타입에 아무것도 추가할 수 없습니다.그래서 우리는 모든 프로토타입을 찾아야 합니다.ChildNode브라우저에 실제로 정의되어 있습니다..remove그 사람들한테요.

여기 IE 8에서 동작하는 것을 확인한 심이 있습니다.

(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 8 이전에는 DOM 프로토타입을 확장할 수 없기 때문에 IE 7 이하에서는 이 방법이 작동하지 않습니다.하지만 2015년이 다가오고 있는 지금 대부분의 사람들은 그런 것에 신경 쓸 필요가 없다고 생각합니다.

심을 포함하면 DOM 요소를 제거할 수 있습니다.element전화만 하면 DOM에서

element.remove();

댓글을 달 만한 충분한 담당자가 없는 것 같아서 다른 답변이 필요할 것 같습니다.

removeChild()를 사용하거나 inner를 설정하여 노드의 링크를 해제하는 경우부모 HTML 속성에서는 다른 참조가 없는지 확인해야 합니다.그렇지 않으면 실제로 파괴되지 않고 메모리 누수로 이어집니다.removeChild()를 호출하기 전에 노드를 참조할 수 있는 방법은 여러 가지가 있으며 범위를 벗어나지 않은 참조를 명시적으로 삭제해야 합니다.

Doug Crockford는 여기서 이벤트 핸들러가 IE에서 순환 참조의 원인으로 알려져 있으며 removeChild()를 호출하기 전에 다음과 같이 명시적으로 삭제할 것을 제안합니다.

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

또한 많은 예방 조치를 취해도 여기 Jens-Ingo Farley가 설명한 IE에서 메모리 누수가 발생할 수 있습니다.

마지막으로 Javascript delete가 정답이라고 생각하지 마세요.많은 사람들이 제안하는 것처럼 보이지만, 그 일은 잘 되지 않을 것이다.다음은 Kangax의 삭제 이해에 대한 좋은 참고 자료입니다.

Node.removeChild()를 사용하면 다음과 같은 작업을 수행할 수 있습니다.

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

DOM 4에서는 삭제 방법이 적용되었지만 W3C에 따르면 브라우저 지원이 부족합니다.

메서드 node.remove()는 DOM 4 사양으로 구현되어 있습니다.그러나 브라우저 지원이 부족하기 때문에 사용하지 마십시오.

그러나 jQuery를 사용하는 경우 제거 방법을 사용할 수 있습니다.

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

, 에서는, 하는 조건을 할 수 .*ngIfAngular(각도) 및 React(반응)에서 다른 보기를 렌더링하는 경우 조건에 따라 달라집니다.

언급URL : https://stackoverflow.com/questions/8830839/javascript-dom-remove-element