id로 요소 제거

표준 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에서는 작동하지 않습니다. 이전 브라우저를 지원해야하는 경우 다음을 수행 할 수 있습니다.

• 질문 에서와 같이 부모 노드를 통해 요소를 제거하십시오 .
• Johan Dettmar의 답변 에서처럼 기본 DOM 함수를 수정 하거나
• DOM4 polyfill을 사용하십시오 .

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

 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()

이 ChildNode.remove()메소드는 오브젝트가 속한 트리에서 오브젝트를 제거합니다.

https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

여기에 전화하는 방법을 보여주는 바이올린이 있습니다. document.getElementById('my-id').remove()

https://jsfiddle.net/52kp584L/

**

NodeList를 확장 할 필요가 없습니다. 이미 구현되었습니다.

**

remove()DOM의 메소드를 사용하여 해당 요소를 직접 제거 할 수 있습니다 .

다음은 예입니다.

let subsWrapper = document.getElementById("element_id");
subsWrapper.remove();
//OR directly.
document.getElementById("element_id").remove();

개발의 현재 버전이 DOM 레벨 4 사양에 따르면,이 새로운 편리한 돌연변이 방법을 사용할 수 있습니다 : append(), prepend(), before(), after(), replace(),와 remove().

https://catalin.red/removing-an-element-with-plain-javascript-remove-method/

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

함수 이름은입니다 removeChild(). 부모가 없을 때 자식을 어떻게 제거 할 수 있습니까? :)

반면에, 당신이 보여준대로 항상 전화를 걸 필요는 없습니다. element.parentNode주어진 노드의 부모 노드를 얻는 도우미입니다. 부모 노드를 이미 알고 있다면 다음과 같이 사용할 수 있습니다.

전의:

// Removing a specified element when knowing its parent node
var d = document.getElementById("top");
var d_nested = document.getElementById("nested");
var throwawayNode = d.removeChild(d_nested);

https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild

===================================================== =======

더 많은 것을 추가하려면 :

어떤 대답을 대신 사용하는 것을 지적 parentNode.removeChild(child);, 당신은 사용할 수 있습니다 elem.remove();. 그러나 내가 알았 듯이 두 기능에는 차이가 있으며 그 답변에는 언급되어 있지 않습니다.

를 사용 removeChild()하면 제거 된 노드에 대한 참조가 반환됩니다.

var removedChild = element.parentNode.removeChild(element); 
console.log(removedChild); //will print the removed child.

그러나를 사용 elem.remove();하면 참조를 반환하지 않습니다.

var el = document.getElementById('Example');
var removedChild = el.remove(); //undefined

https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

이 동작은 Chrome 및 FF에서 확인할 수 있습니다. 나는 그것이 주목할 가치가 있다고 믿는다 :)

내 대답이 질문에 가치를 더하고 도움이되기를 바랍니다.

ele.parentNode.removeChild (ele)를 사용하는 함수는 사용자가 작성했지만 아직 HTML에 삽입하지 않은 요소에는 작동하지 않습니다. jQuery 및 Prototype과 같은 라이브러리는 현명하게 다음과 같은 방법을 사용하여 이러한 제한을 피합니다.

_limbo = document.createElement('div');
function deleteElement(ele){
    _limbo.appendChild(ele);
    _limbo.removeChild(ele);
}

DOM의 독창적 인 디자이너가 부모 / 자식 및 이전 / 다음 탐색을 오늘날 인기있는 DHTML 수정보다 높은 우선 순위로 유지했기 때문에 JavaScript가 그렇게 작동한다고 생각합니다. 하나의 <input type = 'text'>에서 읽고 DOM의 상대 위치로 다른 것에 쓸 수 있다는 것은 90 년대 중반에 유용했습니다. 전체 HTML 양식이나 대화식 GUI 요소의 동적 생성이 거의 번거로 웠던시기였습니다. 일부 개발자의 눈.

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

IMHO : 그 이유는 다른 환경에서 본 것과 같습니다. "링크"를 기반으로 작업을 수행하고 있습니다. 연결되어있는 동안에는 삭제할 수 없습니다.

나무 가지를 자르는 것처럼. 자르는 동안 나무에 가장 가까운쪽에 앉으십시오. 그렇지 않으면 결과는 ... 불행합니다 (재미 있지만).

이것은 실제로 FireFox에서 나온 것입니다 ... IE는 한 번 앞서 팩보다 앞서 있었고 요소를 직접 제거 할 수있었습니다.

이것은 내 가정에 불과하지만 부모를 통해 자녀를 제거 해야하는 이유는 FireFox가 참조를 처리하는 방식에 문제가 있다고 생각합니다.

hari-kari를 직접 커밋하기 위해 객체를 호출 한 경우, 사망 한 직후에도 해당 참조를 보유하고 있습니다. 이로 인해 여러 가지 불쾌한 버그가 생길 수 있습니다. 버그를 제거하지 못하거나 제거하지만 유효한 것으로 보이는 참조를 유지하거나 단순히 메모리 누수와 같은 버그가 발생할 수 있습니다.

그들이 문제를 깨달았을 때 해결 방법은 부모를 통해 요소를 제거하는 것이 었습니다. 요소가 사라지면 이제 부모에 대한 참조를 유지하기 때문입니다. 이것은 모든 불쾌 함을 막을 것이고 (예를 들어 노드별로 트리 노드를 닫는 경우) 다소 멋지게 압축 될 것입니다.

쉽게 고칠 수있는 버그 여야하지만 웹 프로그래밍의 다른 많은 것들과 마찬가지로 릴리스가 서두르고 이로 이어질 것입니다. 많은 코드를 깨는 것.

다시,이 모든 것은 단순히 내 추측 일뿐입니다.

그러나 나는 웹 프로그래밍이 마침내 완전한 봄 청소를 받고,이 모든 이상한 작은 특이성이 정리되고 모든 사람들이 동일한 규칙에 따라 연주하기 시작하는 날을 고대합니다.

아마도 내 로봇 하인이 저에게 임금을 청구 한 것 같습니다.

내가 이해 한 바에 따르면 노드를 직접 제거하는 것은 Firefox에서만 작동하지 않으며 Internet Explorer에서만 작동합니다. 따라서 Firefox를 지원하려면 부모에게 가서 자식을 제거해야합니다.

참조 : http://chiragrdarji.wordpress.com/2007/03/16/removedelete-element-from-page-using-javascript-working-in-firefoxieopera/

// http://javascript.crockford.com/memory/leak.html
// cleans dom element to prevent memory leaks
function domPurge(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) {
            domPurge(d.childNodes[i]);
       }
    }
}

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

이것은 스크립트 오류없이 요소를 제거하는 가장 좋은 기능입니다.

function Remove(EId)
{
    return(EObj=document.getElementById(EId))?EObj.parentNode.removeChild(EObj):false;
}

참고하십시오 EObj=document.getElementById(EId).

이것은 하나의 등호가 아닙니다 ==.

element EId가 존재하면 함수가 제거하고 그렇지 않으면 false가 아닌 false를 반환합니다 error.