[javascript] id로 요소 제거

JAVASCRIPT / 글쓴이

표준 JavaScript로 요소를 제거 할 때는 먼저 부모로 이동해야합니다.

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

부모 노드에 먼저 가야하는 것이 조금 이상해 보입니다 .JavaScript가 이런 식으로 작동하는 이유가 있습니까?

답변

네이티브 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]);
        }
    }
}

그런 다음 이와 같은 요소를 제거 할 수 있습니다 

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

또는

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

참고 : 이 솔루션은 IE 7 이하에서는 작동하지 않습니다. DOM 확장에 대한 자세한 내용은이 기사를 참조하십시오 .

편집 : 2019 년 내 답변을 검토 node.remove()하고 구조에 왔으며 다음과 같이 사용할 수 있습니다 (위의 polyfill없이).

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

또는

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

이러한 기능은 모든 최신 브라우저 (IE가 아닌)에서 사용할 수 있습니다. MDN 에 대해 자세히 알아보십시오 .

답변

크로스 브라우저 및 IE> = 11

document.getElementById("element-id").outerHTML = "";

답변

remove매번 그것에 대해 생각할 필요가 없도록 기능을 만들 수 있습니다.

function removeElement(id) {
    var elem = document.getElementById(id);
    return elem.parentNode.removeChild(elem);
}

답변

DOM이 지원하는 것 입니다. 해당 페이지에서 “제거”또는 “삭제”를 검색하면 removeChild 만이 노드를 제거합니다.

답변

DOM은 노드 트리로 구성되며 각 노드에는 하위 노드에 대한 참조 목록과 함께 값이 있습니다. 따라서 element.parentNode.removeChild(element)내부에서 일어나는 일을 정확히 모방합니다. 먼저 부모 노드로 이동 한 다음 자식 노드에 대한 참조를 제거하십시오.

DOM4부터 같은 기능을 수행하는 도우미 함수가 제공됩니다 element.remove(). 이는 브라우저의 87 % (2016 년 기준)에서 작동하지만 IE 11에서는 작동하지 않습니다. 이전 브라우저를 지원해야하는 경우 다음을 수행 할 수 있습니다.

답변

하나의 요소를 제거하는 경우 :

 var elem = document.getElementById("yourid");
 elem.parentElement.removeChild(elem);

예를 들어 특정 클래스 이름을 가진 모든 요소를 ​​제거하려면 다음을 수행하십시오.

 var list = document.getElementsByClassName("yourclassname");
 for(var i = list.length - 1; 0 <= i; i--)
 if(list[i] && list[i].parentElement)
 list[i].parentElement.removeChild(list[i]);

답변

당신은 그냥 사용할 수 있습니다 element.remove()