title: Why does removing an element with javascript prevent iteration of elements?
body: <p>I am trying to replace all text fields on a page with labels.</p>
  
  <pre><code>function replaceInputTextFieldsWithValues() {
  
      var inputFields = document.getElementsByTagName("input");
  
      for(var i = 0; i &lt; inputFields.length; i++) {
          if(inputFields[i].getAttribute("type")== "text") {          
              var parent = inputFields[i].parentNode;
              var value = inputFields[i].value;
              parent.removeChild(inputFields[i]);
              var label = document.createElement('label');
              label.setAttribute('for', value);
              label.innerHTML = value;
              parent.appendChild(label);
          }
      }
  }
  </code></pre>
  
  <p>My HTML document is organized in tables. This function only seems to work on the first element in each table.</p>
  
  <p>On the other hand, when I remove the line:</p>
  
  <pre><code>parent.removeChild(inputFields[i]);
  </code></pre>
  
  <p>The code seems to work fine. Why is this happening and how do I fix it?</p>