ID로 요소 제거

질문자 :Zaz

표준 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() 가 구출되었으며 다음과 같이 사용할 수 있습니다(위의 폴리필 없이).

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

또는

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

이러한 기능은 모든 최신 브라우저(IE 제외)에서 사용할 수 있습니다. MDN에서 더 읽어보세요.

Johan Dettmar

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

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

user2192293

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

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

xsznix

element.remove()

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

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

• 질문 에서와 같이 부모 노드를 통해 요소를 제거하십시오.
• Johan Dettmar의 답변 과 같이 기본 DOM 기능을 수정하거나
• DOM4 폴리필을 사용합니다.

Zaz

DOM이 지원하는 것 입니다. 해당 페이지에서 "제거" 또는 "삭제"를 검색하면 removeChild 가 노드를 제거하는 유일한 것입니다.

Andrew

하나의 요소를 제거하려면:

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

csjpeter

element.remove() 사용할 수 있습니다.

Sai Sunder

ChildNode.remove() 메서드는 개체가 속한 트리에서 개체를 제거합니다.

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

document.getElementById('my-id').remove() 호출하는 방법을 보여주는 바이올린입니다.

https://jsfiddle.net/52kp584L/

**

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

**

Alex Fallenstedt

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

다음은 예입니다.

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

Code Cooker

현재 개발 중인 DOM 레벨 4 사양에 따르면 몇 가지 새로운 편리한 변형 방법을 사용할 수 있습니다: append() , prepend() , before() , after() , replace() 및 remove() .

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

Red

먼저 부모 노드로 이동해야 하는 것이 약간 이상해 보입니다. 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에서 관찰할 수 있습니다. 주목할 가치가 있다고 생각합니다 :)

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

Nimeshka Srimal

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의 상대 위치에 따라 다른 것에 쓸 수 있다는 것은 HTML 양식 또는 대화형 GUI 요소의 동적 생성이 거의 눈에 띄지 않았던 90년대 중반에 유용했습니다. 어떤 개발자의 눈에는

Psudo

당신은 단순히 사용할 수 있습니다

 document.getElementById("elementID").outerHTML="";

Internet Explorer를 포함한 모든 브라우저에서 작동합니다.

Khayri R.R. Woulfe

최단

OP가 getElementById를 피할 수 있는 ID를 사용하기 때문에 Sai Sunder 답변을 개선합니다.

 elementId.remove(); 

 box2.remove(); // remove BOX 2 this["box-3"].remove(); // remove BOX 3 (for Id with 'minus' character)

 <div id="box1">My BOX 1</div> <div id="box2">My BOX 2</div> <div id="box-3">My BOX 3</div> <div id="box4">My BOX 4</div>

Kamil Kiełczewski

먼저 부모 노드로 이동해야 하는 것이 약간 이상해 보입니다. JavaScript가 이렇게 작동하는 이유가 있습니까?

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

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

TheSatinKnight

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

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

James

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

이것은 내 가정일 뿐이지만, 부모를 통해 자녀를 제거해야 하는 이유는 Firefox 가 참조를 처리하는 방식에 문제가 있기 때문이라고 생각합니다.

hari-kari를 직접 커밋하기 위해 객체를 호출하면 객체가 죽은 직후에 객체에 대한 참조를 계속 보유하게 됩니다. 이것은 제거에 실패하거나 제거했지만 유효한 것으로 보이는 참조를 유지하거나 단순히 메모리 누수와 같은 몇 가지 불쾌한 버그를 생성할 가능성이 있습니다.

나는 그들이 문제를 깨달았을 때 해결 방법은 부모를 통해 요소를 제거하는 것이라고 생각합니다. 요소가 사라지면 이제 단순히 부모에 대한 참조를 보유하고 있기 때문입니다. 이것은 모든 불쾌감을 멈추게 하고 (예를 들어 노드별로 트리 노드를 닫는 경우) 오히려 멋지게 'zip-up'

쉽게 고칠 수 있는 버그여야 하지만 웹 프로그래밍의 다른 많은 문제와 마찬가지로 릴리스가 급하게 진행되어 이 문제가 발생했을 수 있습니다. 다음 버전이 출시될 즈음에는 이를 변경하면 많은 코드를 깨는 것.

다시 말하지만, 이 모든 것은 단순히 제 추측입니다.

그러나 나는 웹 프로그래밍이 마침내 완전한 봄철 청소를 하고, 이 모든 이상한 작은 특이성이 정리되고, 모두가 같은 규칙에 따라 플레이하기 시작할 날을 고대합니다.

내 로봇 하인이 체불임금으로 나를 고소한 다음 날일 것이다.

SilentThunderStorm

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

will Farrell

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

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

EObj=document.getElementById(EId) 참고하세요.

== 아닌 하나의 등호입니다.

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

Amin Atabakzadeh

출처 : http:www.stackoverflow.com/questions/3387427/remove-element-by-id