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