JavaScript'teki bir DOM düğümünün alt öğelerinin tümünü kaldırmaya nasıl giderim?

Diyelim ki (çirkin) HTML kodum var:

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

Ve istediğim düğümü alıyorum:

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

Çocukları nasıl kaldırabilirim fooki <p id="foo"></p>geriye bırakılır?

Sadece yapabilir miyim:

myNode.childNodes = new Array();

ya da bir kombinasyonunu kullanmalı removeElementmıyım?

Cevabın doğrudan DOM olmasını istiyorum; ancak jQuery'de yalnızca DOM yanıtıyla birlikte bir yanıt da sağlarsanız ekstra puanlar.

Seçenek 1 A: Temizleme innerHTML.

• Bu yaklaşım basittir, ancak tarayıcının HTML ayrıştırıcısını çağırdığı için yüksek performanslı uygulamalar için uygun olmayabilir (tarayıcılar değerin boş bir dize olduğu durum için optimize edebilir ).

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>

Seçenek 1 B: Temizleme textContent

• Yukarıdaki gibi, ama kullanın .textContent. MDN'ye göre bu, innerHTMLtarayıcıların HTML ayrıştırıcılarını çağırmayacağı ve bunun yerine öğenin tüm alt öğelerini hemen tek bir #textdüğümle değiştireceğinden daha hızlı olacaktır .

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>

Seçenek 2 A: Her birini çıkarmak için döngü lastChild:

• Bu cevapta daha önce yapılan bir düzenleme kullanıldı firstChild, ancak bu lastChildbilgisayar bilimlerinde olduğu gibi güncellendi , genel olarak , bir koleksiyonun son öğesini kaldırmak, ilk öğeyi kaldırmaktan (koleksiyonun nasıl uygulandığına bağlı olarak) çok daha hızlıdır. ).
• Döngü için kontrol etmeye devam firstChild ihtimale karşı bunun kontrol etmek için daha hızlı firstChilddaha lastChild(örn eleman listesi UA tarafından yönlendirilmiş bağlantılı liste olarak uygulanıyor ise).

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>

Seçenek 2 B: Aşağıdakileri çıkarmak için döngü lastElementChild:

• Bu yaklaşım , ebeveynin tüm Element(yani #textdüğümleri ve olmayan <!-- comments -->) çocuklarını (torunlarını değil) korur - ve bu, uygulamanızda istenebilir (örneğin, şablon talimatlarını saklamak için satır içi HTML yorumları kullanan bazı şablonlama sistemleri).
• Internet Explorer yalnızca lastElementChildIE9 için destek eklediğinden, bu yaklaşım son yıllara kadar kullanılmadı .

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.clearChildrenmaymun yaması:

• ElementJavaScript'teki prototipe sadece el.clearChildren()( herhangi bir HTML öğesi nesnesinin nerede elolduğu) çağrılmasını basitleştirmek için yeni bir yöntem özelliği ekleyebiliriz .
• (Açıkça söylemek gerekirse, bu standart bir DOM özelliği veya eksik bir özellik olmadığından, bir çoklu dolgu değil, bir maymun yamasıdır. Maymun yamalamanın birçok durumda haklı olarak cesaret kırıldığını unutmayın.)

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>

Şu anda kabul edilen cevap, innerHTMLm93a'nın doğru şekilde belirtildiği gibi, daha yavaş (en azından IE ve Chrome'da) olma konusunda yanlıştır .

Chrome ve FF, bu yöntemi kullanarak (ekli jquery verilerini yok edecek) önemli ölçüde daha hızlıdır:

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

FF ve Chrome için uzak saniyede ve IE'de en hızlı:

node.innerHTML = '';

InnerHTML , etkinlik işleyicilerinizi yok etmez veya jquery referanslarını kesmez , ayrıca burada bir çözüm olarak önerilmektedir: https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML .

En hızlı DOM manipülasyon yöntemi (hala önceki ikisinden daha yavaştır) Aralık kaldırmadır, ancak IE9'a kadar aralıklar desteklenmez.

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

Bahsedilen diğer yöntemler karşılaştırılabilir gibi görünebilir, ancak outHT, jquery (1.1.1 ve 3.1.1) dışında, her şeyden önemli ölçüde daha yavaş olan innerHTML'den çok daha yavaştır:

$(node).empty();

Kanıt burada:

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 (Eski url'yi düzenlemek çalışmadığı için jsperf yeniden başlatma için yeni url)

Jsperf'in "test başına döngü" genellikle "yineleme başına" olarak anlaşılır ve yalnızca ilk yinelemenin kaldırılacak düğümleri vardır, bu nedenle sonuçlar anlamsızdır, gönderme sırasında bu iş parçacığında yanlış ayarlanmış testler vardı.

İle modern Javascript kullanın remove!

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

Bu, ES5'te düğüm kaldırma işlemini yazmanın daha yeni bir yoludur. Vanilla JS ve önceki sürümlerden çok daha güzel okuyor .

Çoğu kullanıcı modern tarayıcılara sahip olmalıdır, aksi takdirde gerektiğinde aktarım yapabilirsiniz.

Tarayıcı Desteği -% 95 Ara 2019

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

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

JQuery'den etkilenen torunlarınız varsa, jQuery verilerini temizleyecek bir yöntem kullanmanız gerekir .

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

JQuery .empty()yöntemi , kaldırılmakta olan öğelerle ilişkili jQuery verilerinin temizlenmesini sağlar.

Yalnızca DOMçocukları kaldırma yöntemlerini kullanırsanız , bu veriler kalır.

JQuery kullanıyorsanız:

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

Yapmazsanız:

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

En hızlı...

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

Andrey Lushnikov'a jsperf.com (serin site!) Bağlantısı için teşekkürler .

EDIT: Net olmak gerekirse, Chrome'da firstChild ve lastChild arasında performans farkı yoktur. Üst yanıt performans için iyi bir çözüm göstermektedir.

Düğümün yalnızca çocukları olmadan olmasını istiyorsanız, bunun bir kopyasını da şöyle yapabilirsiniz:

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

Neyi başarmaya çalıştığınıza bağlıdır.

İşte başka bir yaklaşım:

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

Standart hariç innerText gibi. Bu var biraz daha yavaş daha removeChild()ama kullanımı daha kolay ve silmek çok fazla şeyler yoksa pek bir performans farkı yapmayacağız.

DanMan, Maarten ve Matt'e yanıt olarak. Metni ayarlamak için bir düğümü klonlamak, sonuçlarımda gerçekten geçerli bir yoldur.

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

Ayrıca bu, parentNode'a erişmeye çalışırken null döndüren dom'da olmayan düğümler için de çalışır. Ayrıca, güvenli olmanız gerekiyorsa, içerik eklemeden önce bir düğümün boş olması gerçekten yararlıdır. Alttaki kullanım durumunu düşünün.

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

Bir öğenin içindeki bir dizeyi değiştirirken bu yöntemi çok yararlı buluyorum, düğümün ne içereceğinden emin değilseniz, karışıklığı nasıl temizleyeceğinizi düşünmek yerine, yeni başlayın.

Genelde yaptığım şey:

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

Ve voila, daha sonra herhangi bir dom öğesini aşağıdakilerle boşaltabilirsiniz:

anyDom.empty()

Bunu başarmak için birkaç seçenek vardır:

En hızlı ():

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

Alternatifler (daha yavaş):

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

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

Önerilen seçeneklerle kıyaslama

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

Bu, öğedeki tüm düğümleri kaldıracaktır.

innerText kazanır! http://jsperf.com/innerhtml-vs-removechild/133 . Önceki tüm testlerde ana düğümün iç domu ilk tekrarlamada ve daha sonra boş div'e uygulandığında innerHTML veya removeChild silinmiştir.

Bir düğümün alt düğümlerini Javascript aracılığıyla kaldırmanın en basit yolu

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

insanların yaptığını gördüm:

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

sonra birisi kullanmanın el.lastNodedaha hızlı olduğunu söyledi

Ancak bunun en hızlı olduğunu düşünürdüm:

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

ne düşünüyorsun?

ps: bu konu benim için hayat kurtarıcıydı. benim firefox addon reddedildi çünkü innerHTML kullandım. Uzun zamandır bir alışkanlıktı. sonra bunu kandırdım. ve aslında bir hız farkı fark ettim. yükte innerhtml güncelleme biraz zaman aldı, ancak addElement anında gidiyor!

Range loop kullanmak benim için en doğal olanı:

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

Chrome ve Firefox'taki ölçümlerime göre, yaklaşık 1,3 kat daha yavaş. Normal koşullarda, bu belki de önemli olmayacaktır.

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

Genellikle JavaScript, DOM düğümlerinin listelerine başvurmak için diziler kullanır. Bu nedenle, HTMLElements dizisi aracılığıyla yapmakla ilgileniyorsanız, bu iyi çalışır. Ayrıca, dikkat çekmeye değer, çünkü JavaScript proto yerine bir dizi başvurusu kullanıyorum bu IE dahil herhangi bir tarayıcıda çalışması gerekir.

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

Neden burada en basit yöntemi takip etmiyoruz "loop" içeride ilmekledi.

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

• Üst div öğesini seçme
• İlk alt öğeyi ortadan kalmayıncaya kadar ortadan kaldırmak için While döngüsünde "remove" yöntemini kullanma.

Sadece birisi başka bir soru bu soruyu söyledi ve henüz görmedim bir yöntem eklemek düşündüm:

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

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

Clear işlevi, öğeyi alıyor ve üst düğümü, kendisini çocuksuz bir kopyayla değiştirmek için kullanıyor. Eleman seyrek ise çok fazla performans kazanımı olmaz, ancak eleman bir grup düğüme sahip olduğunda performans kazançları gerçekleşir.

Yalnızca işlevsel yaklaşım:

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

domChildren içindeki "childNodes", hemen bulunmayan öğelerden bir nodeList öğesi verecektir; bu, hiçbiri bulunmadığında boştur. NodeList üzerinden eşlemek için domChildren onu diziye dönüştürür. domEmpty, domRemove işlevini kaldıran tüm öğeler üzerinde bir işlev eşler.

Örnek kullanım:

domEmpty(document.body)

tüm çocukları vücut elemanından kaldırır.

JQuery'deki diğer yollar

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

sadece IE:

parentElement.removeNode(true);

true - derinlemesine kaldırma anlamına gelir - yani tüm çocuklar da çıkarılır

En kolay yol:

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

döngü için kullanarak basit ve hızlı !!

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

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

bu <span>etikette çalışmaz !

Bunun içine bir şey geri koymak istiyorsanız div, innerHTMLmuhtemelen daha iyidir.

Örneğim:

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

.firstChildVeya .lastChildyöntemini kullanırsam displayHTML()işlev daha sonra çalışmaz, ancak .innerHTMLyöntemle ilgili bir sorun yoktur .

Bu saf javascript i jQuery kullanmıyorum ama IE bile tüm tarayıcıda çalışır ve anlamak çok basit

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

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