Verständnisproblem

[Herr Frager]

Hallo,

ich möchte aus einem Element mit der id 'jal' alle <b> und <span> Elemente entfernen:

  
var jal = document.getElementById('jal');  
if(jal.hasChildNodes()) {  
  for(var i=0; i<jal.childNodes.length; i++) {  
  if(jal.childNodes[i].nodeName == 'B' || jal.childNodes[i].nodeName == 'SPAN') {  
    jal.removeChild(jal.childNodes[i]);  
  }  
}  

Ergebnis ist: alle <b> werden entfernt, aber keine <span>.
Mache ich 2 for-Schleifen und entferne erst nur die <b> und danach die <span>, funktioniert es.

HTML-Struktur sieht so aus:

<div id="jal">  
  <h2>Überschrift</h2>  
  <b>Text</b>  
  <span>mehr Text</span>  
  <b>Text</b>  
  <span>mehr Text</span>  
</div>

Kann mir das jemand erklären?

Danke schon mal
Herr Frager

[Felix Riesterer]

Lieber Herr Frager,

warum so umständlich? Man kann auch mit NodeLists (getElementsByTagName) arbeiten:

function removeSpanAndB (el) {  
    var bs = el.getElementsByTagName("b"),  
        spans = el.getElementsByTagName("span"),  
        i;  
  
    while (bs.length) {  
        bs[0].parentNode.removeChild(bs[0]);  
    }  
  
    while (spans.length) {  
        spans[0].parentNode.removeChild(spans[0]);  
    }  
}

Obiger Code ist ungetestet, sollte aber "funzen".

Liebe Grüße,

Felix Riesterer.

[Herr Frager]

Hallo,

warum so umständlich? Man kann auch mit NodeLists (getElementsByTagName) arbeiten:

danke, das Leben kann so einfach sein...

nur - ich würd gern verstehen, warum mein Code nicht funktioniert.

VG Herr Frager

[Herr Frager]

Hallo,

nur - ich würd gern verstehen, warum mein Code nicht funktioniert.

Hab gerade deine Antwort gelesen, danke!

VG Herr Frager

[molily]

warum so umständlich? Man kann auch mit NodeLists (getElementsByTagName) arbeiten:

Gut, man sollte nur beachten, dass das Durchlaufen der direkten Kindknoten etwas anderes ist als das Durchsuchen sämtlicher Nachfahren-Elementen nach gewissen Elementtypen. Wenn ein span im h2 auftauchen würde, würde es mit der zweiten Methode ebenfalls entfernt werden.

Mathias

[Felix Riesterer]

Lieber molily,

Gut, man sollte nur beachten, dass das Durchlaufen der direkten Kindknoten etwas anderes ist als das Durchsuchen sämtlicher Nachfahren-Elementen nach gewissen Elementtypen.

das ist völlig richtig. Aber gerade in diesem Aspekt war die "Aufgabenstellung" ungenau. Der Beispielcode mag das vielleicht etwas aufgeklärt haben, aber daran muss ich mich ja dann nicht halten, da er "nicht funktioniert" hat.

Liebe Grüße,

Felix Riesterer.

[Felix Riesterer]

Lieber Herr Fager,

for(var i=0; i<jal.childNodes.length; i++) {
[...]
    jal.removeChild(jal.childNodes[i]);

childNodes ist eine NodeList, und in JavaScript ist die "live". Das bedeutet, dass wenn Du ein Element aus dem DOM entfernst, dann änderst Du automatisch die Anzahl und Nummerierung der Elemente der NodeList, weil die weiteren Nodes nach vorne "aufrücken". Deine Index-Variable zählt dann natürlich Mist, denn was eben noch nodeList[4] war, ist nach Entfernen von nodeList[3] das neue nodeList[3].

Liebe Grüße,

Felix Riesterer.

[Joachim]

Hi,

Deine Index-Variable zählt dann natürlich Mist [...]

weshalb man...

for(var i=0; i<jal.childNodes.length; i++) {

nicht vorwärts, sondern rückwärts ab childNodes.length -1  zählen müsste.

;-)

Gruesse, Joachim

[Herr Frager]

Hallo,

Deine Index-Variable zählt dann natürlich Mist [...]
weshalb man...

for(var i=0; i<jal.childNodes.length; i++) {
nicht vorwärts, sondern rückwärts ab childNodes.length -1  zählen müsste.

danke, logisch muss es so rum sein...

VG Herr Frager