Usuń wszystkie elementy potomne węzła DOM w JavaScript

872

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.

Polaris878
źródło

Odpowiedzi:

1674

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>

Gabriel McAdams
źródło
6
Z jQuery można wziąć pod uwagę te dwie kwestie: Ta metoda usuwa nie tylko elementy potomne (i inne elementy potomne), ale także dowolny tekst w zestawie dopasowanych elementów. Jest tak, ponieważ zgodnie ze specyfikacją DOM każdy ciąg tekstu w elemencie jest uważany za węzeł podrzędny tego elementu. ORAZ „Aby uniknąć wycieków pamięci, jQuery usuwa inne konstrukcje, takie jak procedury obsługi danych i zdarzeń z elementów potomnych przed usunięciem samych elementów”.
jottos
104
Btw, używanie lastChild wydaje się być nieco bardziej efektywne jsperf.com/innerhtml-vs-removechild/15
Andrey Lushnikov
24
innerHTML działa tylko wtedy, gdy masz do czynienia tylko z HTML. Jeśli w środku jest np. SVG, działa tylko usuwanie elementu
stwissel
34
NIGDY NIGDY NIGDY nie używaj innerHTML = ''. Nie rób Problem polega na tym, że elementy wyglądają, jakby zostały usunięte, ale wewnętrznie węzły utrzymują się i spowalniają. Z jakiegoś powodu musisz usunąć wszystkie poszczególne węzły. Testowany zarówno w Google Chrome, jak i IE. Proszę rozważyć usunięcie „rozwiązania” innerHTML, ponieważ jest złe.
Kenji
15
@vsync Nie wierzę, że komentarz Kenji jest uzasadniony. Robienie innerHTML = ''jest wolniejsze, ale nie sądzę, żeby było „złe”. Wszelkie roszczenia dotyczące wycieków pamięci należy poprzeć dowodami.
Chris Middleton
115

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.

npjohns
źródło
2
Twój jsperf jest całkowicie zepsuty. To niezbyt dobry dowód.
bryc
4
To jest obecnie najlepsza odpowiedź. Cała reszta w tym wątku to dezinformacja (!) Dziękujemy za usunięcie wszystkich tych starych, złych testów.
Ben
6
„InnerHTML nie zniszczy programów obsługi zdarzeń ani nie zepsuje żadnych odniesień do jquery” Zatrzyma zatrzymane dane jQuery.cache, powodując wyciek pamięci, ponieważ jedynym dostępnym odniesieniem do zarządzania tymi danymi były elementy, które właśnie zniszczyłeś.
1
„InnerHTML nie zniszczy programów obsługi zdarzeń ani nie zepsuje żadnych odniesień do jquery” odnosi się do kontenera, a nie do dzieci. cloneNodewyłącza kontener, co oznacza, że ​​odniesienia do kontenera nie są zachowywane (kwerendy lub w inny sposób). Pamięć podręczna Jquery może sprawić, że warto użyć jquery do usunięcia elementów, jeśli masz dołączone dane jquery. Mam nadzieję, że w pewnym momencie przejdą na WeakMaps . Czyszczenie (a nawet istnienie) $ .cache nie wydaje się być oficjalnie udokumentowane.
npjohns
10
Testy jsperf są tutaj zepsute. Silnik testowy zgłasza: „Błąd: węzły Dom nie zostały odtworzone podczas iteracji, wyniki testu będą bez znaczenia”.
senderle
73

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

Gibolt
źródło
14
Pętla for nie będzie działać, ponieważ parent.children / parent.childNodes są listami na żywo; wywołanie remove modyfikuje listę i dlatego nie ma gwarancji, że iterator iteruje wszystko. W chrome np. Kończysz pomijanie każdego innego węzła. Lepiej użyć while (parent.firstChild) { parent.removeChild(parent.firstChild); }pętli. developer.mozilla.org/en-US/docs/Web/API/ParentNode/children developer.mozilla.org/en-US/docs/Web/API/Node/childNodes
qix 16.11.16
3
Fajny skrót, choć mniej czytelny:while (parent.firstChild && !parent.firstChild.remove());
Gibolt
1
One-liner, gdy wydajność nie jest wielkim problemem:[...parent.childNodes].forEach(el => el.remove());
1
To nie działa w maszynopisie ... zamiast tego użyjwhile (selectElem.firstElementChild) { selectElem.firstElementChild.remove(); }
John Henckel
43
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ą.

użytkownik113716
źródło
Metoda innerHTML jest zdecydowanie najbardziej wydajna. To powiedziawszy, dane są czyszczone przez .empty (): Eliminuje dane () wewnątrz jquery związane ze znacznikami potomnymi za pomocą pętli rekurencyjnej (powolne, ale może znacznie zmniejszyć zużycie pamięci), Zapobiega wyciekowi pamięci JEŻELI dołączasz zdarzenia bez jquery, jak przy użyciu .onclick = .... Jeśli nie masz takich zdarzeń u dzieci, które chcesz usunąć, ustawienie innerHTML nie spowoduje wycieku. Więc najlepsza odpowiedź brzmi - to zależy.
Chris Moschini
1
Dlaczego nie po prostu umieścić wyrażenie firstChild bezpośrednio w stanie pętli while? while ( myNode.firstChild ) {
Victor Zamanian
while(fc = myNode.firstChild){ myNode.removeChild(fc); }
Valen,
36

Jeśli używasz jQuery:

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

Jeśli nie:

var foo = document.getElementById('foo');
while (foo.firstChild) foo.removeChild(foo.firstChild);
Proszę wstać
źródło
20

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.

Gabe Halsmer
źródło
To samo bez ostrzeżenia LINT: clear: function (container) {for (;;) {var child = container.lastChild; jeśli (! dziecko) przerwa; container.removeChild (child); }}
cskwg
9

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ąć.

DanMan
źródło
3
Może mógłbyś nawet to śledzić parent.replaceChild(cloned, original)? Może to być szybsze niż usuwanie dzieci jeden po drugim i powinno działać na wszystkim, co obsługuje DOM (a więc na każdym typie dokumentu XML, w tym SVG). Ustawienie innerHTML może być również szybsze niż usuwanie dzieci jeden po drugim, ale to nie działa na niczym innym niż dokumenty HTML. Powinien to sprawdzić jakiś czas.
Maarten
13
To nie skopiuje detektorów zdarzeń dodanych za pomocą addEventListener.
Matthew
Jeśli możesz żyć z tym ograniczeniem, to z pewnością jest to szybkie: jsperf.com/innerhtml-vs-removechild/137
DanMan
7

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();
}
Nathan K.
źródło
1
Jest to interesujące, ale wydaje się dość powolne w porównaniu do innych metod: jsperf.com/innerhtml-vs-removechild/256
Polaris878
6
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.

bjb568
źródło
Węzeł tekstowy nie jest elementem
check_ca
przepraszam, masz rację, to rzeczywiście usuwa wszystkie elementy
potomne
To nie zadziała w starszych wersjach Internet Explorera.
pwdst
4

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.

jeroen
źródło
3
najgorsza rzecz na świecie. jeśli zastępujesz oryginalny węzeł jego klonem, tracisz odniesienie do oryginalnego węzła. żadne z programów obsługi zdarzeń i innych powiązań nie będzie działać.
Arun Aravind
4

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()
Ado Ren
źródło
Podoba mi się to rozwiązanie! Czy jest jakiś powód, dla którego powinienem to ustawić, ustawiając wartość parametru InsideHTML na pusty ciąg?
TheCodenator
wydajność: domEl.innerHTML = ""jest słaba i uważana za złą praktykę
Ado Ren
3

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

magik
źródło
3
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.

Henrik
źródło
... ponieważ jest to niepotrzebny kompleks i nie podano żadnego wyjaśnienia, jak to działa (co w rzeczywistości nie jest oczywiste), podejrzewam.
Periata Breatta
2

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.

Alexey
źródło
5
innerTextjest zastrzeżoną rzeczą stwardnienia rozsianego chociaż. Tylko mówię.
DanMan
1
Z pewnością jest to wadliwy test - polega on na tym, boxże nie jest dostępny jako var, ale poprzez wyszukiwanie DOM na podstawie identyfikatora, a ponieważ whilepętla powoduje, że to wolne połączenie jest wielokrotnie karane.
nrabinowitz,
2

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);
}
Chaitanya Bapat
źródło
2

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!

Noitidart
źródło
1
cóż, myślę, czy jest najszybszy, czy nie, niektóre testy jsperf mogą udowodnić oba przypadki
Nikos M.
super dzięki za te testy. nie obejmują for (var i=0...jednak tego. Ale oto, co dostałem, kiedy przeprowadziłem te testy: i.imgur.com/Mn61AmI.png, więc w tych trzech testach firstNode był szybszy niż lastNode i innerHTML, co jest naprawdę fajne
Noitidart
Dodałem testy: jsperf.com/innerhtml-vs-removechild/220 ciekawe rzeczy wykonujące metodę el.firstNode to najszybszy sposób, jaki się wydaje
Noitidart
2

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.

emu
źródło
2
 let el = document.querySelector('#el');
 if (el.hasChildNodes()) {
      el.childNodes.forEach(child => el.removeChild(child));
 }
Tomasz
źródło
1
Proszę wyjaśnić w odpowiedzi, co robi Twój kod?
Nirav Joshi
1
To oczywiste
blacksheep
1

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]);
}
r00t hkr
źródło
1

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.
Neelansh Verma
źródło
Wyjaśnij swoje linie kodu, aby inni użytkownicy mogli zrozumieć jego funkcjonalność. Dzięki!
Ignacio Ara
@IgnacioAra Gotowe!
Neelansh Verma
1

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.

Harry Chilinguerian
źródło
1
Właściwie wydaje się, że wspomniano tutaj stackoverflow.com/a/15441725/576767
Félix Gagnon-Grenier
Felix Musiałem to przegapić, dzięki za korektę +1.
Harry Chilinguerian,
1

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.

Dolph Roger
źródło
0

Inne sposoby w jQuery

var foo = $("#foo");
foo.children().remove();
//or
$("*", foo ).remove();
//or
foo.html("");
//or
foo.empty();
Anoop
źródło
Głosowanie w dół, ponieważ OP powiedział, że odpowiedzi w prostym DOM są preferowane.
bwindels
Również jQuery ma .empty()metodę, $("#foo").empty()wystarczyłoby
JakowL
-1

po prostu tylko IE:

parentElement.removeNode(true);

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

użytkownik2656596
źródło
1
TO ZNACZY? To jest 21 wiek!
everlasto
-1

Najłatwiejszy sposób:

let container = document.getElementById("containerId");
container.innerHTML = "";
Miłosz
źródło
Podczas gdy to działa, uważaj, container.innerHTML = nullaby Internet Explorer wyświetlał tekst null. Powiedziałbym, że to tak naprawdę nie usuwa dzieci.
Arjan
-1

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!

Mohit Karkar
źródło
w ponad wszystkich rozwiązaniach żaden kod nie usuwa <span>tagu
Mohit Karkar
-3

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

Bjathr
źródło
-4

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

})
Ir Calif
źródło
-9

z jQuery:

$("#foo").find("*").remove();
Arnaud F.
źródło
3
$('#foo').children().remove()o wiele bardziej logiczne
Krzysztof Dąbrowski,