JavaScript에서 DOM 노드의 모든 하위 요소를 제거하는 방법은 무엇입니까?

다음과 같은 HTML이 있다고 가정 해보십시오.

<p id="foo">
    <span>hello</span>
    <div>world</div>
</p>

그리고 원하는 노드를 가져옵니다.

var myNode = document.getElementById("foo");

어떻게 자녀들 제거 할 수 있습니다 foo단지 그 정도 <p id="foo"></p>남아?

그냥 할 수 있을까 :

myNode.childNodes = new Array();

또는 몇 가지 조합을 사용해야 removeElement합니까?

나는 대답이 곧바로 DOM이되고 싶다. DOM 전용 답변과 함께 jQuery에 답변을 제공하면 추가 포인트가 있습니다.

옵션 1 A : 지우기 innerHTML.

• 이 방법은 간단하지만 브라우저의 HTML 파서를 호출하기 때문에 고성능 응용 프로그램에는 적합하지 않을 수 있습니다 (브라우저 는 값이 빈 문자열 인 경우 브라우저 가 최적화 될 수 있음 ).

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  myNode.innerHTML = '';
}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <span>Hello</span>
</div>
<button id='doFoo'>Remove via innerHTML</button>

옵션 1 B : 지우기 textContent

• 위와 같이 사용하십시오 .textContent. MDN에 따르면innerHTML 브라우저가 HTML 파서를 호출하지 않고 대신 요소의 모든 하위 요소를 단일 #text노드로 즉시 대체 할 때보 다 더 빠릅니다 .

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  myNode.textContent = '';
}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <span>Hello</span>
</div>
<button id='doFoo'>Remove via textContent</button>

옵션 2 A : 모든 항목을 제거하기 위해 반복 lastChild:

• 이 답변에 대한 이전 편집은 사용 firstChild되었지만 lastChild컴퓨터 과학과 같이 사용하도록 업데이트되었지만 일반적 으로 컬렉션 의 마지막 요소 를 제거하는 것보다 컬렉션 의 마지막 요소 를 제거하는 것이 훨씬 빠릅니다 (컬렉션 구현 방법에 따라 다름) ).
• 루프는 (예를 들어 요소 목록이 UA에 의해 직접 연결 목록으로 구현 된 경우) 보다 확인이 더 빠를 firstChild 경우를 대비 하여 계속 확인합니다 .firstChildlastChild

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  while (myNode.firstChild) {
    myNode.removeChild(myNode.lastChild);
  }
}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <span>Hello</span>
</div>
<button id='doFoo'>Remove via lastChild-loop</button>

옵션 2 B : 모든 항목을 제거하기 위해 반복 lastElementChild:

• 이 접근 방식 은 부모의 모든 비 Element(즉, #text노드 및 <!-- comments -->) 자식 (자손은 아님)을 유지합니다. 이는 응용 프로그램 (예 : 인라인 HTML 주석을 사용하여 템플릿 명령을 저장하는 템플릿 시스템)에서 바람직 할 수 있습니다.
• Internet Explorer lastElementChild는 IE9 에서만 지원을 추가했기 때문에이 방법은 최근까지 사용되지 않았습니다 .

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  while (myNode.lastElementChild) {
    myNode.removeChild(myNode.lastElementChild);
  }
}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <!-- This comment won't be removed -->
  <span>Hello <!-- This comment WILL be removed --></span>
  <!-- But this one won't. -->
</div>
<button id='doFoo'>Remove via lastElementChild-loop</button>

보너스 : Element.clearChildren원숭이 패치 :

• ElementJavaScript 의 프로토 타입에 새로운 메소드 속성을 추가하여 HTML 요소 객체 가 있는el.clearChildren() 곳 으로 간단하게 호출 할 수 있습니다 .el
• 엄밀히 말하면 이것은 표준 DOM 기능이나 누락 된 기능이 아니기 때문에 폴리 필이 아닌 원숭이 패치입니다. 원숭이 패치는 많은 상황에서 올바르게 권장되지 않습니다.

if( typeof Element.prototype.clearChildren === 'undefined' ) {
    Object.defineProperty(Element.prototype, 'clearChildren', {
      configurable: true,
      enumerable: false,
      value: function() {
        while(this.firstChild) this.removeChild(this.lastChild);
      }
    });
}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <span>Hello <!-- This comment WILL be removed --></span>
</div>
<button onclick="this.previousElementSibling.clearChildren()">Remove via monkey-patch</button>

innerHTMLm93a가 올바르게 언급했듯이 현재 허용되는 답변은 (IE 및 Chrome에서는) 느리다 는 점에서 잘못 되었습니다.

이 방법을 사용하면 Chrome과 FF가 훨씬 빨라집니다 (첨부 된 jquery 데이터가 손상됨).

var cNode = node.cloneNode(false);
node.parentNode.replaceChild(cNode, node);

FF 및 Chrome의 경우 먼 초에 IE에서 가장 빠릅니다.

node.innerHTML = '';

InnerHTML 은 이벤트 핸들러를 파괴하거나 jquery 참조를 손상시키지 않습니다 . https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML .

가장 빠른 DOM 조작 방법 (이전 두 방법보다 느림)은 범위 제거이지만 IE9까지는 범위가 지원되지 않습니다.

var range = document.createRange();
range.selectNodeContents(node);
range.deleteContents();

언급 된 다른 메소드는 비교 가능한 것처럼 보이지만 이상치 jquery (1.1.1 및 3.1.1)를 제외하고 innerHTML보다 훨씬 느립니다. 이는 다른 것보다 상당히 느립니다.

$(node).empty();

여기 증거 :

http://jsperf.com/innerhtml-vs-removechild/167 http://jsperf.com/innerhtml-vs-removechild/300 https://jsperf.com/remove-all-child-elements-of-a- dom-node-in-javascript (이전 URL 편집이 작동하지 않으므로 jsperf 재부팅을위한 새 URL)

Jsperf의 "테스트 별 루프"는 종종 "반복마다"로 이해되며 첫 번째 반복 만 제거 할 노드가 있으므로 결과가 의미가 없습니다. 게시시이 스레드의 테스트가 잘못 설정되었습니다.

최신 자바 스크립트를 remove!

const parent = document.getElementById("foo");
while (parent.firstChild) {
    parent.firstChild.remove();
}

이것은 ES5에서 노드 제거를 쓰는 새로운 방법입니다. 바닐라 JS이며 이전 버전보다 훨씬 잘 읽습니다 .

대부분의 사용자는 최신 브라우저를 가지고 있거나 필요한 경우 변환 할 수 있습니다.

브라우저 지원 -2019 년 12 월 95 %

var myNode = document.getElementById("foo");
var fc = myNode.firstChild;

while( fc ) {
    myNode.removeChild( fc );
    fc = myNode.firstChild;
}

당신이 jQuery를이 자손에 영향이있을 가능성이 있다면, 당신은 해야한다 jQuery를 데이터를 정리하는 몇 가지 방법을 사용합니다.

$('#foo').empty();

jQuery .empty()메소드 는 제거중인 요소와 관련된 jQuery가 정리되도록합니다.

단순히 DOM자식을 제거하는 방법을 사용하면 해당 데이터가 유지됩니다.

jQuery를 사용하는 경우 :

$('#foo').empty();

그렇지 않은 경우 :

var foo = document.getElementById('foo');
while (foo.firstChild) foo.removeChild(foo.firstChild);

가장 빠른...

var removeChilds = function (node) {
    var last;
    while (last = node.lastChild) node.removeChild(last);
};

jsperf.com에 대한 링크 를 제공 한 Andrey Lushnikov에게 감사합니다. (쿨 사이트!) .

편집 : 명확하게 말하면 Chrome에서 firstChild와 lastChild 사이의 성능 차이는 없습니다. 가장 좋은 대답은 성능에 대한 좋은 솔루션을 보여줍니다.

자식이없는 노드 만 갖고 싶다면 다음과 같이 복사본을 만들 수도 있습니다.

var dupNode = document.getElementById("foo").cloneNode(false);

달성하려는 대상에 따라 다릅니다.

다른 접근 방식이 있습니다.

function removeAllChildren(theParent){

    // Create the Range object
    var rangeObj = new Range();

    // Select all of theParent's children
    rangeObj.selectNodeContents(theParent);

    // Delete everything that is selected
    rangeObj.deleteContents();
}

element.textContent = '';

표준을 제외하고 innerText와 같습니다. 그건 약간 느린 것보다 removeChild(),하지만 사용하기 쉽게하고 삭제 너무 많은 물건이없는 경우에 많은 성능 차이를하지 않습니다.

DanMan, Maarten 및 Matt에 대한 답변. 텍스트를 설정하기 위해 노드를 복제하는 것은 실제로 내 결과에 실용적인 방법입니다.

// @param {node} node
// @return {node} empty node
function removeAllChildrenFromNode (node) {
  var shell;
  // do not copy the contents
  shell = node.cloneNode(false);

  if (node.parentNode) {
    node.parentNode.replaceChild(shell, node);
  }

  return shell;
}

// use as such
var myNode = document.getElementById('foo');
myNode = removeAllChildrenFromNode( myNode );

또한 이것은 부모 노드에 액세스하려고 할 때 null을 반환하는 DOM에없는 노드에서 작동합니다. 또한 안전해야 할 경우 컨텐츠를 추가하기 전에 노드가 비어 있으면 실제로 도움이됩니다. 아래의 사용 사례를 고려하십시오.

// @param {node} node
// @param {string|html} content
// @return {node} node with content only
function refreshContent (node, content) {
  var shell;
  // do not copy the contents
  shell = node.cloneNode(false);

  // use innerHTML or you preffered method
  // depending on what you need
  shell.innerHTML( content );

  if (node.parentNode) {
    node.parentNode.replaceChild(shell, node);
  }

  return shell;
}

// use as such
var myNode = document.getElementById('foo');
myNode = refreshContent( myNode );

요소 내부의 문자열을 바꿀 때이 방법이 매우 유용하다는 것을 알았습니다. 노드를 정리하는 방법을 걱정하지 않고 노드에 무엇을 포함할지 확실하지 않은 경우 새로 시작하십시오.

여기 내가 일반적으로하는 일이 있습니다.

HTMLElement.prototype.empty = function() {
    while (this.firstChild) {
        this.removeChild(this.firstChild);
    }
}

그리고 voila, 나중에 다음을 사용하여 dom 요소를 비울 수 있습니다.

anyDom.empty()

이를 달성하기위한 몇 가지 옵션이 있습니다.

가장 빠른 ():

while (node.lastChild) {
  node.removeChild(node.lastChild);
}

대안 (느리게) :

while (node.firstChild) {
  node.removeChild(node.firstChild);
}

while (node.hasChildNodes()) {
  node.removeChild(node.lastChild);
}

제안 된 옵션이있는 벤치 마크

var empty_element = function (element) {

    var node = element;

    while (element.hasChildNodes()) {              // selected elem has children

        if (node.hasChildNodes()) {                // current node has children
            node = node.lastChild;                 // set current node to child
        }
        else {                                     // last child found
            console.log(node.nodeName);
            node = node.parentNode;                // set node to parent
            node.removeChild(node.lastChild);      // remove last node
        }
    }
}

요소 내의 모든 노드가 제거됩니다.

innerText가 승자입니다! http://jsperf.com/innerhtml-vs-removechild/133 . 이전의 모든 테스트에서 부모 노드의 내부 돔은 처음 반복에서 삭제 된 다음 empty div에 적용된 innerHTML 또는 removeChild를 삭제했습니다.

Javascript를 통해 노드의 하위 노드를 제거하는 가장 간단한 방법

var myNode = document.getElementById("foo");
while(myNode.hasChildNodes())
{
   myNode.removeChild(myNode.lastChild);
}

나는 사람들이하는 것을 보았다 :

while (el.firstNode) {
    el.removeChild(el.firstNode);
}

누군가가 사용 el.lastNode이 더 빠르다고 말했다

그러나 이것이 가장 빠르다고 생각합니다.

var children = el.childNodes;
for (var i=children.length - 1; i>-1; i--) {
    el.removeNode(children[i]);
}

어떻게 생각해?

추신 :이 주제는 저에게 생명의 은인이었습니다. 내 파이어 폭스 애드온은 cuz를 거부했습니다. innerHTML을 사용했습니다. 오랜 습관이었습니다. 그때 나는 이것을 foudn. 그리고 실제로 속도 차이를 발견했습니다. 로드시 innerhtml은 업데이트하는 데 시간이 걸렸지 만 addElement를 사용하면 즉시 업데이트됩니다!

범위 루프를 사용하면 가장 자연스럽게 느껴집니다.

for (var child of node.childNodes) {
    child.remove();
}

Chrome과 Firefox에서 측정 한 결과 약 1.3 배 느립니다. 정상적인 상황에서는 이것이 중요하지 않을 것입니다.

 let el = document.querySelector('#el');
 if (el.hasChildNodes()) {
      el.childNodes.forEach(child => el.removeChild(child));
 }

일반적으로 JavaScript는 배열을 사용하여 DOM 노드 목록을 참조합니다. 따라서 HTMLElements 배열을 통해 관심이 있다면 잘 작동합니다. 또한 JavaScript proto 대신 배열 참조를 사용하기 때문에 IE를 포함한 모든 브라우저에서 작동해야합니다.

while(nodeArray.length !== 0) {
  nodeArray[0].parentNode.removeChild(nodeArray[0]);
}

왜 우리가 가장 간단한 방법을 따르지 않습니까?

const foo = document.querySelector(".foo");
while (foo.firstChild) {
  foo.firstChild.remove();     
}

• 상위 div 선택
• 첫 번째 자식 요소가 없어 질 때까지 While 루프 내에서 "remove"메서드 사용

누군가 다른 사람 이이 질문을 언급하고 아직 보지 못한 방법을 추가 할 것이라고 생각했습니다.

function clear(el) {
    el.parentNode.replaceChild(el.cloneNode(false), el);
}

var myNode = document.getElementById("foo");
clear(myNode);

명확한 기능은 요소를 가져오고 부모 노드를 사용하여 자식이없는 복사본으로 대체합니다. 요소가 희소 한 경우 성능이 크게 향상되지 않지만 요소에 노드가 많은 경우 성능이 향상됩니다.

기능적 접근 방식 :

const domChildren = (el) => Array.from(el.childNodes)
const domRemove = (el) => el.parentNode.removeChild(el)
const domEmpty = (el) => domChildren(el).map(domRemove)

domChildren의 "childNodes"는 직계 자식 요소의 nodeList를 제공하며, 아무것도 찾을 수 없으면 비어 있습니다. nodeList에 맵핑하기 위해 domChildren은이를 노드로 변환합니다. domEmpty는 domRemove 함수를 제거하는 모든 요소에 domRemove 함수를 맵핑합니다.

사용법 예 :

domEmpty(document.body)

body 요소에서 모든 자식을 제거합니다.

jQuery의 다른 방법

var foo = $("#foo");
foo.children().remove();
//or
$("*", foo ).remove();
//or
foo.html("");
//or
foo.empty();

단순히 IE 만 :

parentElement.removeNode(true);

true -심하게 제거하는 것-모든 어린이도 제거됨을 의미

가장 쉬운 방법 :

let container = document.getElementById("containerId");
container.innerHTML = "";

for 루프를 사용하여 간단하고 빠르게 !!

var myNode = document.getElementById("foo");

    for(var i = myNode.childNodes.length - 1; i >= 0; --i) {
      myNode.removeChild(myNode.childNodes[i]);
    }

이것은 <span>태그 에서 작동하지 않습니다 !

당신은에 뭔가 다시 넣고 싶은 경우 div는innerHTML 아마 더 좋다.

내 예 :

<ul><div id="result"></div></ul>

<script>
  function displayHTML(result){
    var movieLink = document.createElement("li");
    var t = document.createTextNode(result.Title);
    movieLink.appendChild(t);
    outputDiv.appendChild(movieLink);
  }
</script>

.firstChildor .lastChild메소드를 사용하면 displayHTML()나중에 함수가 작동하지 않지만 .innerHTML메소드에 문제가 없습니다 .

이것은 순수한 자바 스크립트입니다 .jQuery를 사용하지 않지만 모든 브라우저에서도 작동하며 IE는 매우 간단합니다.

   <div id="my_div">
    <p>Paragraph one</p>
    <p>Paragraph two</p>
    <p>Paragraph three</p>
   </div>
   <button id ="my_button>Remove nodes ?</button>

   document.getElementById("my_button").addEventListener("click",function(){

  let parent_node =document.getElemetById("my_div"); //Div which contains paagraphs

  //Let find numbers of child inside the div then remove all
  for(var i =0; i < parent_node.childNodes.length; i++) {
     //To avoid a problem which may happen if there is no childNodes[i] 
     try{
       if(parent_node.childNodes[i]){
         parent_node.removeChild(parent_node.childNodes[i]);
       }
     }catch(e){
     }
  }

})

or you may simpli do this which is a quick way to do

document.getElementById("my_button").addEventListener("click",function(){

 let parent_node =document.getElemetById("my_div");
 parent_node.innerHTML ="";

})

jQuery로 :

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