Obecnie akceptowana odpowiedź jest błędna, ponieważ innerHTML jest wolniejszy (przynajmniej w IE i Chrome), jak poprawnie wspomniał m93a.

Chrome i FF są znacznie szybsze przy użyciu tej metody (która zniszczy dołą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 zniszczy procesów obsługi zdarzeń ani nie złamie referencji jquery , jest również zalecany jako rozwiązanie tutaj: https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML

Najszybszą metodą manipulacji DOM (wciąż wolniejszą niż dwie poprzednie) jest usuwanie 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 dużo wolniejsze niż innerHTML, z wyjątkiem odstającego, jquery (1.1.1 i 3.1.1), który jest znacznie wolniejszy niż cokolwiek innego:

$(node).empty();

Dowód 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 dla restartu jsperf, ponieważ edycja starego adresu url nie działa)

Jsperf ' s "per-test-loop" często jest rozumiany jako "per-iteracja", a tylko pierwsza iteracja ma węzły do usunięcia, więc wyniki są bez znaczenia, w momencie opublikowania tam były testy w tym wątku skonfigurowane nieprawidłowo.

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

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

Jeśli istnieje jakakolwiek szansa, że masz Potomków dotkniętych jQuery, to musisz użyć jakiejś metody, która oczyści dane jQuery.

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

Metoda jQuery .empty() zapewni, że wszelkie dane jQuery powiązane z usuwanymi elementami zostaną wyczyszczone.

Jeśli po prostu użyjesz DOM metod 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 Andrey Lushnikov za jego link do jsperf.com (fajna strona!).

Użyj nowoczesnego Javascript, z remove!

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

Jest to nowszy sposób zapisu usuwania węzłów w ES5. Jest to vanilla JS i czyta dużo ładniej niż poprzednie wersje.

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

Obsługa Przeglądarki - 91% Apr 2018

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

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

element.textContent = '';

Jest jak innerText, z wyjątkiem standardowego. Jest to nieco wolniejsze niż removeChild(), ale jest łatwiejsze w użyciu i nie zrobi dużej różnicy w wydajności, jeśli nie masz zbyt wiele rzeczy do usunięcia.

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

Istnieje kilka opcji, aby to osiągnąć:

Najszybszy ():

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

Alternatywy (wolniejsze):

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

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

Benchmark z sugerowanymi opcjami

Widziałem ludzi robiących:

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

Wtedy ktoś powiedział, że używanie el.lastNode jest szybsze

Jednak uważam, że jest to najszybsze:

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

Ps: ten temat był dla mnie ratunkiem. mój dodatek do Firefoksa został odrzucony, ponieważ używałem innerHTML. To był nawyk od dawna. a potem to. zauważyłem różnicę prędkości. po załadowaniu innerhtml zajęło trochę czasu, aby zaktualizować, jednak idąc przez addElement jego natychmiast!

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 usunięcie wszystkich węzłów wewnątrz elementu.

W odpowiedzi dla DanMan, Maarten i Matt. Klonowanie węzła, aby ustawić tekst jest rzeczywiście realny sposób 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ż dla węzłów spoza dom, które zwracają null podczas próby uzyskania dostępu do kodu parentNode. Ponadto, jeśli chcesz 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 ciągu znaków wewnątrz elementu, jeśli nie jesteś pewien, co węzeł będzie zamiast martwić się, jak posprzątać bałagan, zacznij od nowa.

InnerText jest zwycięzcą! http://jsperf.com/innerhtml-vs-removechild/133 . we wszystkich poprzednich testach wewnętrzny dom węzła nadrzędnego został usunięty na początku iteracji, a następnie innerHTML lub removeChild, gdzie został zastosowany do pustego 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);
}

Ogólnie Rzecz Biorąc, JavaScript używa tablic do odwoływania się do list węzłów DOM. Tak, to będzie działać ładnie, jeśli masz zainteresowanie robi to za pośrednictwem tablicy HTMLElements. Również, warto zauważyć, ponieważ używam array reference zamiast JavaScript proto to powinno działać w każdej przeglądarce, w tym IE.

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

Dlaczego nie stosujemy najprostszej metody tutaj "Usuń" zapętloną wewnątrz while.

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

• Wybór rodzica div
• Użycie metody "Usuń" wewnątrz pętli While do wyeliminowania pierwszego elementu potomnego, dopóki nie zostanie żaden.

Najprostszy sposób:

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

Proste i szybkie używanie pętli for!!

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 tagu <span>!

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

Inne sposoby w jQuery

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

Po prostu TYLKO IE:

parentElement.removeNode(true);

true - środki do głębokiego usuwania-co oznacza, że wszystkie dzieci są również usuwane

To jest czysty javascript używam nie jQuery ale działa we wszystkich przeglądarkach nawet IE

<div id="my_div">
 <p>i am the first child</p>
 <p>i am another paragraphs</p>
 <p>enven me also i am another paragraphs</p>
</div>
<button id ="my_button>Remove nodes ?</button>

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

  let parent_node =document.getElemetById("my_div");
  let last_child  =parent_node.lastChild;
  while(last_child){
    parent_node.removeChild(last_child);
  }
})

Or you may simpli do this

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

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

})

Jeśli chcesz włożyć coś z powrotem do tego div, {[2] } jest prawdopodobnie lepszy.

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żywam metody .firstChild lub .lastChild Funkcja displayHTML() nie działa później, ale nie ma problemu z metodą .innerHTML.

Z jQuery:

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