Jak powinienem przejść do usuwania wszystkich elementów potomnych węzła DOM w JavaScript?

Powiedz, że mam następujący (brzydki) kod HTML:

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

I łapię węzeł, który chcę:

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

Jak mogę usunąć dzieci foo, aby po prostu <p id="foo"></p>zostały?

Czy mogę po prostu zrobić:

myNode.childNodes = new Array();

czy powinienem używać jakiejś kombinacji removeElement?

Chciałbym, aby odpowiedź była prosta DOM; dodatkowe punkty, jeśli podasz także odpowiedź w jQuery wraz z odpowiedzią tylko dla DOM.

Opcja 1 A: Rozliczenie innerHTML.

• To podejście jest proste, ale może nie być odpowiednie dla aplikacji o wysokiej wydajności, ponieważ wywołuje parser HTML przeglądarki (chociaż przeglądarki mogą optymalizować w przypadku, gdy wartość jest pustym ciągiem).

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>

Opcja 1 B: Rozliczenie textContent

• Jak wyżej, ale użyj .textContent. Według MDN będzie to szybsze niż, innerHTMLponieważ przeglądarki nie będą wywoływać swoich parserów HTML i zamiast tego natychmiast zastąpią wszystkie elementy potomne elementu jednym #textwęzłem.

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>

Opcja 2 A: Zapętlanie w celu usunięcia co lastChild:

• Użyto wcześniejszej edycji tej odpowiedzi firstChild, ale została ona zaktualizowana tak, aby można ją było zastosować lastChildw informatyce, ogólnie rzecz biorąc , usunięcie ostatniego elementu kolekcji jest znacznie szybsze niż usunięcie pierwszego elementu (w zależności od sposobu zaimplementowania kolekcji ).
• Pętla kontynuuje sprawdzanie na firstChild wypadek , gdyby było to szybsze firstChildniż lastChild(np. Jeśli lista elementów jest zaimplementowana jako ukierunkowana lista połączona przez UA).

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>

Opcja 2 B: Pętla do usuwania co lastElementChild:

• Takie podejście zachowuje wszystkie niebędące Element(mianowicie #textwęzły i <!-- comments -->) potomki rodzica (ale nie ich potomków) - i może to być pożądane w twojej aplikacji (np. Niektóre systemy szablonów, które używają wbudowanych komentarzy HTML do przechowywania instrukcji szablonu).
• To podejście nie było używane aż do ostatnich lat, ponieważ Internet Explorer dodał tylko obsługę lastElementChildIE9.

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>

Bonus: Element.clearChildrenłatka małpy:

• Możemy dodać nową metodę-właściwość do Elementprototypu w JavaScript, aby uprościć wywoływanie go do just el.clearChildren()(gdzie eljest dowolny obiekt elementu HTML).
• (Ściśle mówiąc, jest to łatka małpa, a nie polifill, ponieważ nie jest to standardowa funkcja DOM lub brakująca cecha. Pamiętaj, że łatanie małp jest słusznie odradzane w wielu sytuacjach.)

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>

Aktualnie akceptowana odpowiedź jest błędna, jeśli chodzi o innerHTMLspowolnienie (przynajmniej w IE i Chrome), jak słusznie wspomniano m93a.

Chrome i FF są znacznie szybsze przy użyciu tej metody (która zniszczy załączone dane jquery):

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

w odległej sekundzie dla FF i Chrome, a najszybszy w IE:

node.innerHTML = '';

InnerHTML nie niszczy programów obsługi zdarzeń ani nie niszczy odniesień do jquery , jest również zalecane jako rozwiązanie tutaj: https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML .

Najszybszą metodą manipulacji DOM (nadal wolniejszą niż dwie poprzednie) jest usunięcie zakresu, ale zakresy nie są obsługiwane do IE9.

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

Inne wymienione metody wydają się być porównywalne, ale o wiele wolniejsze niż innerHTML, z wyjątkiem wartości odstającej, jquery (1.1.1 i 3.1.1), która jest znacznie wolniejsza niż cokolwiek innego:

$(node).empty();

Dowody tutaj:

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 (Nowy adres URL do ponownego uruchomienia jsperf, ponieważ edycja starego adresu URL nie działa)

„Pętla na test” Jsperfa często jest rozumiana jako „per-iteracja”, a tylko pierwsza iteracja ma węzły do ​​usunięcia, więc wyniki są bez znaczenia, w momencie publikacji testy w tym wątku były nieprawidłowo skonfigurowane.

Korzystaj z nowoczesnego Javascript z remove!

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

Jest to nowszy sposób zapisywania usuwania węzłów w ES5. Jest to waniliowy JS i czyta się znacznie ładniej niż poprzednie wersje.

Większość użytkowników powinna mieć nowoczesne przeglądarki lub w razie potrzeby można dokonać transpozycji w dół.

Obsługa przeglądarki - 95%, grudzień 2019

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

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

Jeśli istnieje szansa, że ​​masz potomków dotkniętych przez jQuery, musisz użyć metody, która wyczyści dane jQuery.

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

JQuery .empty()Sposób zapewnia, że wszystkie dane związane z elementami jQuery usuwany zostaną oczyszczone.

Jeśli po prostu zastosujesz DOMmetody usuwania dzieci, dane te pozostaną.

Jeśli używasz jQuery:

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

Jeśli nie:

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

Najszybszy...

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

Podziękowania dla Andreya Lushnikova za jego link do strony jsperf.com (fajna strona!).

EDYCJA: żeby było jasne, nie ma różnicy w wydajności między Chrome między firstChild a lastChild. Najlepsza odpowiedź pokazuje dobre rozwiązanie dla wydajności.

Jeśli chcesz mieć tylko węzeł bez jego elementów potomnych, możesz również wykonać jego kopię w następujący sposób:

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

Zależy od tego, co próbujesz osiągnąć.

Oto inne podejście:

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 = '';

To jest jak tekst wewnętrzny, z wyjątkiem standardowego. Jest nieco wolniejszy niż removeChild(), ale jest łatwiejszy w użyciu i nie zrobi dużej różnicy w wydajności, jeśli nie masz zbyt wielu rzeczy do usunięcia.

W odpowiedzi na DanMan, Maarten i Matt. Klonowanie węzła w celu ustawienia tekstu jest rzeczywiście realnym sposobem w moich wynikach.

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

Działa to również w przypadku węzłów spoza domeny, które zwracają wartość null podczas próby uzyskania dostępu do elementu parentNode. Ponadto, jeśli musisz być bezpieczny, węzeł jest pusty przed dodaniem treści, jest to naprawdę pomocne. Rozważ przypadek użycia poniżej.

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

Uważam, że ta metoda jest bardzo przydatna podczas zastępowania łańcucha wewnątrz elementu, jeśli nie jesteś pewien, co zawiera węzeł, zamiast martwić się, jak posprzątać bałagan, zacznij od nowa.

Oto, co zwykle robię:

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

I voila, później możesz opróżnić dowolny element dom za pomocą:

anyDom.empty()

Można to osiągnąć na kilka sposobów:

Najszybszy ():

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

Alternatywy (wolniej):

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

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

Benchmark z sugerowanymi opcjami

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
        }
    }
}

Spowoduje to usunięcie wszystkich węzłów w elemencie.

innerText jest zwycięzcą! http://jsperf.com/innerhtml-vs-removechild/133 . We wszystkich poprzednich testach wewnętrzna domena węzła nadrzędnego była usuwana przy pierwszej iteracji, a następnie innerHTML lub removeChild, gdzie zastosowano do pustej div.

Najprostszy sposób usuwania węzłów potomnych węzła za pomocą Javascript

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

widziałem ludzi, którzy:

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

wtedy ktoś powiedział używając el.lastNode jest szybsze

Myślę jednak, że jest to najszybszy:

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

co myślisz?

ps: ten temat był dla mnie ratunkiem. mój dodatek Firefox został odrzucony, ponieważ użyłem innerHTML. To był nawyk przez długi czas. to foudn to. i faktycznie zauważyłem różnicę prędkości. po załadowaniu odczekiwanie na aktualizację innerhtml trwało chwilę, jednak addElement działał natychmiast!

Korzystanie z pętli zasięgu jest dla mnie najbardziej naturalne:

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

Według moich pomiarów w Chrome i Firefox jest około 1,3 razy wolniejszy. W normalnych okolicznościach może to nie będzie miało znaczenia.

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

Ogólnie JavaScript używa tablic do odwoływania się do list węzłów DOM. Będzie to działać dobrze, jeśli masz interes w tym, aby zrobić to za pomocą tablicy HTMLElements. Warto również zauważyć, ponieważ używam odwołania do tablicy zamiast proto JavaScript, powinno to działać w dowolnej przeglądarce, w tym IE.

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

Dlaczego nie zastosujemy tutaj najprostszej metody „usuń” zapętloną wewnątrz.

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

• Wybór rodzica div
• Użycie metody „remove” w pętli While do wyeliminowania pierwszego elementu potomnego, dopóki nie zostanie żaden.

Właśnie widziałem, jak ktoś wspomniał o tym pytaniu w innym i pomyślał, że dodam metodę, której jeszcze nie widziałem:

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

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

Funkcja czyszczenia polega na pobieraniu elementu i używaniu węzła nadrzędnego do zastąpienia się kopią bez elementów potomnych. Niewielki wzrost wydajności, jeśli element jest rzadki, ale gdy element ma kilka węzłów, wzrost wydajności jest realizowany.

Podejście tylko funkcjonalne:

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

„childNodes” w domChildren poda nodeList bezpośrednich elementów potomnych, który jest pusty, gdy nie zostaną znalezione. Aby zmapować listę nodeList, domChildren konwertuje ją na tablicę. domEmpty mapuje funkcję domRemove na wszystkie elementy, które ją usuwają.

Przykładowe użycie:

domEmpty(document.body)

usuwa wszystkie dzieci z elementu ciała.

Inne sposoby w jQuery

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

po prostu tylko IE:

parentElement.removeNode(true);

true - oznacza głębokie usunięcie - co oznacza, że ​​wszystkie dzieci są również usuwane

Najłatwiejszy sposób:

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

prosty i szybki w użyciu dla pętli !!

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

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

to nie zadziała w <span>tagu!

Jeśli chcesz coś w to włożyć div, innerHTMLto prawdopodobnie lepiej.

Mój przykład:

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

Jeśli użyję metody .firstChildlub .lastChild, displayHTML()funkcja nie będzie działać później, ale nie będzie problemu z tą .innerHTMLmetodą.

To jest czysty skrypt javascript Nie używam jQuery, ale działa we wszystkich przeglądarkach, nawet IE i jest bardzo prosty do zrozumienia

   <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 ="";

})

z jQuery:

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