Pašalinti visus „DOM“ mazgo elementus „javascript“

Kaip galiu pašalinti visus DOM mazgo vaikus javascript'e?

Tarkime, turiu šiuos (negražus) HTML:

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

Ir aš patrauksiu norimą mazgą:

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

Kaip ištrinti <p id="foo"></p> vaikų elementus palikti tik <p id="foo"></p> ?

Ar galiu padaryti:

 myNode.childNodes = new Array(); 

arba turėčiau naudoti tam tikrą removeElement ?

Norėčiau, kad atsakymas būtų tiesioginis DOM; nors papildomi taškai, jei taip pat pateikiate atsakymą jQuery kartu su atsakymu DOM.

627
17 окт. nustatė Polaris878 spalio 17 d 2010-10-17 23:51 '10, 11:51 PM 2010-10-17 23:51
@ 29 atsakymai

1 variantas (daug lėčiau, žr. Komentarus toliau):

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

2 galimybė (daug greičiau):

 var myNode = document.getElementById("foo"); while (myNode.firstChild) { myNode.removeChild(myNode.firstChild); } 
1250
17 окт. Gabriel McAdams atsakymas spalio 17 d 2010-10-17 23:52 '10, 11:52 val. 2010-10-17 23:52

Priimtinas atsakymas šiuo metu yra neteisingas dėl internalHTML lėčiau (bent jau IE ir „Chrome“), kaip nurodyta m93a.

„Chrome“ ir „FF“ naudoja šį metodą daug greičiau (tai sunaikins pridedamus „jquery“ duomenis):

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

antroje vietoje - FF ir „Chrome“ ir greičiausias IE:

 node.innerHTML = ''; 

„InnerHTML“ nesunaikins jūsų įvykių tvarkytojų ar nesutruks nuorodų į „Jquery“ , taip pat rekomenduojama kaip sprendimas čia: https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML

Greičiausias būdas manipuliuoti DOM (net lėčiau nei ankstesniuose dviejuose) yra pašalinti diapazoną, tačiau diapazonai nepalaikomi, kol nebus IE9.

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

Kiti paminėti metodai atrodo panašūs, bet daug lėtesni nei internalHTML, išskyrus išpūtimą, žvalgymą (1.1.1 ir 3.1.1), kurie yra žymiai lėtesni nei bet kas kitas:

 $(node).empty(); 

Įrodymai yra čia:

http://jsperf.com/innerhtml-vs-removechild/167 http://jsperf.com/innerhtml-vs-removechild/300 streikai> https://jsperf.com/remove-all-child-elements-of- a-dom-node-in-javascript (naujas URL įkeliant jsperf, nes senojo URL redagavimas neveikia)

Jsperf "per-test-loop" dažnai suprantama kaip "pereracija", ir tik pirmasis iteravimas turi pašalinti mazgus, todėl rezultatai yra beprasmiški, testai buvo neteisingai įdiegti šiame sraute paskelbimo metu.

82
09 апр. Atsakymą pateikė npjohns 09 Bal 2014-04-09 18:04 '14 at 18:04 2014-04-09 18:04
 var myNode = document.getElementById("foo"); var fc = myNode.firstChild; while( fc ) { myNode.removeChild( fc ); fc = myNode.firstChild; } 

Jei yra tikimybė, kad turite jQuery paveiktų vaikų, turėtumėte naudoti tam tikrą metodą, kuris išvalo jQuery duomenis.

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

JQuery .empty() metodas užtikrina, kad visi duomenys, susiję su jQuery elementų šalinimu, bus išvalyti.

Jei paprasčiausiai naudojate metodus t12> pašalinti vaikus, šie duomenys išliks.

40
17 окт. atsakymą pateikė user113716 17 okt. 2010-10-17 23:57 '10, 23:57, 2010-10-17 23:57

Jei naudojate jQuery:

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

Jei ne:

 var foo = document.getElementById('foo'); while (foo.firstChild) foo.removeChild(foo.firstChild); 
32
18 окт. Atsakymas pateikiamas „ PleaseStand Oct 18“. 2010-10-18 00:02 '10 - 0:02 2010-10-18 00:02

Naudokite šiuolaikinę „Javascript“, remove !

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

Tai naujesnis būdas rašyti ištrinti mazgus ES5. Tai vanilė JS ir yra daug geriau skaitoma nei ankstesnės versijos.

Dauguma vartotojų turėtų turėti šiuolaikines naršykles, arba, jei reikia, jas galite išversti.

Naršyklės palaikymas - 91% 2018 m

15
15 нояб. atsakymas pateikiamas gibolt 15 nov. 2016-11-15 12:57 '16 at 12:57 2016-11-15 12:57

Greičiausias ...

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

Ačiū Andrejui Lushnikovui už jo nuorodą į jsperf.com (vėsioje svetainėje!).

15
02 апр. Gabe Halsmer atsakymas 02 Bal 2013-04-02 21:02 '13, 21:02 2013-04-02 21:02

Jei norite, kad mazgas būtų be jūsų vaikų, galite kopijuoti jį taip:

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

Tai priklauso nuo to, ką bandote pasiekti.

9
18 окт. DanMan paskelbė spalio 18 d 2010-10-18 00:13 '10 - 0:13 2010-10-18 00:13

Čia yra kitas požiūris:

 function removeAllChildren(theParent){ // Create the Range object var rangeObj = new Range(); // Select all of theParent children rangeObj.selectNodeContents(theParent); // Delete everything that is selected rangeObj.deleteContents(); } 
5
11 марта '14 в 23:27 2014-03-11 23:27 Atsakymą pateikė Nathan K kovo 14 d. 14 val. 23:27 2014-03-11 23:27
 element.textContent = ''; 

Tai panaši į vidinį tekstą, išskyrus standartinį. Tai yra šiek tiek lėčiau nei „ removeChild() , tačiau jį lengviau naudoti ir nebus daug skiriasi nuo našumo, jei neturite per daug medžiagos pašalinti.

5
28 марта '14 в 20:13 2014-03-28 20:13 atsakymą pateikė bjb568 kovo 28 d. 14, 20:13 2014-03-28 20:13

Atsakydamas į DanManą, Maarteną ir Mattą. Įrenginio klonavimas, norint nustatyti tekstą, iš tikrųjų yra perspektyvus būdas mano rezultatuose.

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

Tai taip pat veikia ne dom domenams, kurie grįžta į null, kai bandoma pasiekti pagrindinį kodą. Be to, jei turite būti saugūs, prieš pridedant turinį mazgas yra tuščias, jis yra tikrai naudingas. Apsvarstykite toliau pateiktą naudojimo atvejį.

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

Manau, kad šis metodas labai naudingas keičiant eilutę viduje elemento, jei nesate tikri, kad jame bus mazgas, o ne nerimauti, kaip išvalyti netvarą, pradėkite naują.

4
15 марта '13 в 23:40 2013-03-15 23:40 atsakymas pateikiamas kovo 15 d. 13 val. 23:40 2013-03-15 23:40
 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 } } } 

Tai pašalins visus elemento elementus.

3
01 февр. Henriko atsakymas vasario 01 d. 2014-02-01 16:46 '14 at 16:46 2014-02-01 16:46

Tam yra keletas variantų:

Greičiausias ():

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

Alternatyvos (lėčiau):

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

Kontrolinis taškas su siūlomomis parinktimis

3
27 янв. atsakymas pateikiamas magiccrafter 27 sausis 2017-01-27 16:49 '17 ne 4:49 2017-01-27 16:49

Mačiau žmones:

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

tada kažkas sakė, kad el.lastNode yra greitesnis

tačiau manau, kad tai greičiausias:

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

Ką manote?

ps: ši tema buvo taupymas man. mano „Firefox“ priedas buvo atmestas, nes naudoju internalHTML. Tai buvo įprotis ilgą laiką. Aš tai suprantu. ir aš tikrai pastebėjau greičio skirtumą. įkeliant „internalhtml“ prireikė šiek tiek laiko atnaujinti, tačiau eidami per addElement, tai yra greitas!

3
03 февр. Atsakymą pateikė Noitidart 03 vasaris. 2014-02-03 13:03 '14 at 13:03 2014-02-03 13:03

Lengviausias būdas pašalinti vaikų mazgų mazgus per „Javascript“

 var myNode = document.getElementById("foo"); while(myNode.hasChildNodes()) { myNode.removeChild(myNode.lastChild); } 
2
18 июля '16 в 21:12 2016-07-18 21:12 atsakymas pateikiamas Čaitanjai Bapatui liepos 18, 16 d. 21:12 2016-07-18 21:12

„InternalText“ yra nugalėtojas! http://jsperf.com/innerhtml-vs-removechild/133 . Visuose ankstesniuose bandymuose pirmasis iteracijos metu buvo pašalintas vidinio pagrindinio mazgo domas, tada vidinisHTML arba removeChild, kur jis taikomas tuščiam div.

2
27 янв. Aleksejus atsakė sausio 27 d 2014-01-27 14:08 '14, 14:08 2014-01-27 14:08

Paprastai „JavaScript“ naudoja masyvus, nurodydamas DOM mazgų sąrašus. Taigi, jis veiks gerai, jei susidomės jame HTMLElements. Be to, verta paminėti, nes naudoju nuorodą į masyvą vietoj „JavaScript“ proto, tai turėtų veikti bet kurioje naršyklėje, įskaitant IE.

 while(nodeArray.length !== 0) { nodeArray[0].parentNode.removeChild(nodeArray[0]); } 
1
14 июля '17 в 0:14 2017-07-14 00:14 atsakymas pateikiamas r00t hkr, liepos 14 d. 17, 0:14 2017-07-14 00:14

Štai ką aš paprastai darau:

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

Ir voila, vėliau galite ištrinti bet kurį dom elementą:

 anyDom.empty() 
0
09 сент. Atsakymas duotas Ado Ren 09 rugsėjis. 2018-09-09 23:27 '18, 23:27 pm 2018-09-09 23:27

Kodėl mes nesilaikome paprasčiausio metodo, čia mes „ištriname“ viduje.

 const foo = document.querySelector(".foo"); while (foo.firstChild) { foo.firstChild.remove(); } 
  • Tėvų div pasirinkimas
  • „Pašalinimo“ metodo naudojimas viduje Kai ciklas pašalina pirmąjį vaiką, kol jis bus paliktas.
0
21 мая '18 в 12:58 2018-05-21 12:58 atsakymą pateikė NEelansh Verma gegužės 21 d., 18 val. 12:58 2018-05-21 12:58

Naudojant diapazono diapazoną man atrodo labiausiai natūralus:

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

Pagal mano „Chrome“ ir „Firefox“ matavimus, tai yra apie 1,3 karto lėčiau. Esant normalioms aplinkybėms, tai nėra svarbu.

0
06 дек. atsakymas emu 06 gruodis 2018-12-06 23:03 '18, 11:03 val. 2018-12-06 23:03

jQuery, jūs tiesiog naudojate:

 $("#target").empty(); 

kodo pavyzdys:

 $("#button").click(function(){ $("#target").empty(); }); 
0
20 марта '17 в 7:24 2017-03-20 07:24 „ Abdul Aziz Al Basyir“ atsakymas kovo 20 d. 17, 7:24 2017-03-20 07:24

Aš tiesiog pamačiau, kad kas nors paminėja šį klausimą kitoje, ir aš maniau, kad pridėsiu metodą, kurio aš dar nemačiau:

 function clear(el) { el.parentNode.replaceChild(el.cloneNode(false), el); } var myNode = document.getElementById("foo"); clear(myNode); 

Išvalymo funkcija atlieka elementą ir naudoja pirminį mazgą, kad jį pakeistų be kopijos. Ne daug našumo padidėja, jei elementas yra nedidelis, bet kai elementas turi daug mazgų, našumas yra realizuojamas.

-1
15 нояб. atsakymas pateikiamas Hario Chilinguerianui 15 nov. 2018-11-15 00:26 '18 0:26 2018-11-15 00:26

paprastas ir greitas naudoti kilpa!

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

tai neveiks <span> !

-1
18 авг. Atsakymas pateikiamas MOHIT KARKAR 18 rug . 2018-08-18 21:30 '18 21:30 2018-08-18 21:30

Lengviausias būdas:

 let container = document.getElementById("containerId"); container.innerHTML = ""; 
-1
05 февр. atsakymą pateikė milosz 05 vasaris 2018-02-05 17:24 '18 at 17:24 pm 2018-02-05 17:24

tik IE:

 parentElement.removeNode(true); 

true - reiškia gilų ištrynimą - tai reiškia, kad visi vaikai taip pat ištrinami

-1
15 дек. Atsakymą pateikė user2656596 gruodžio 15 d. 2016-12-15 15:31 '16 at 15:31 pm 2016-12-15 15:31

Kiti jQuery būdai

 var foo = $("#foo"); foo.children().remove(); or $("*", foo ).remove(); or foo.html(""); 
-1
16 окт. Anoopo spalio 16 d. atsakymas . 2011-10-16 21:09 '11, 21:09, 2011-10-16 21:09

Nugalėtojo atsakymo 2 galimybė.

 function emptyElement(element) { var myNode = element; while (myNode.firstChild) { myNode.removeChild(myNode.firstChild); } } emptyElement(document.body) 
-2
19 окт. atsakymas pateikiamas Marian07 19 okt. 2016-10-19 20:43 '16 at 8:43 pm 2016-10-19 20:43

Jei norite kažką grąžinti į šį div , galbūt innerHTML geresnis.

Mano pavyzdys:

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

Jei naudoju „ .firstChild arba „ .lastChild , funkcija „ displayHTML() neveikia po to, bet nėra .lastChild problemos.

-3
18 окт. Bjathr Oct 18 atsakymas 2017-10-18 10:02 '17 10:02 2017-10-18 10:02

Tai grynas javascript, nesinaudoju jQuery, bet jis veikia visose naršyklėse, net ir IE, ir tai tiesiog suprantama

  <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 =""; }) 
-3
30 марта '17 в 9:02 2017-03-30 09:02 atsakymą pateikė Ir Calif , kovo 30 d. 17 d. 9:02 2017-03-30 09:02

su jQuery:

 $("#foo").find("*").remove(); 
-5
17 окт. atsakymą pateikė Arnaud F. Spalio 17 d. 2010-10-17 23:54 '10, 11:54 PM 2010-10-17 23:54

Kiti klausimai apie „ tags“ arba „ Klauskite“