title: Removing element by outerHTML from html collection
body: <p>I have the following code. I am trying to make an element removed by setting outerHTML to empty(''). I also made few research on html collections and found that it is a live collection</p>
  <h2>ref :</h2>
  <ul>
  <li><p><a href="https://idiallo.com/javascript/live-html-collections" rel="nofollow noreferrer">https://idiallo.com/javascript/live-html-collections</a></p>
  </li>
  <li><p><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection</a></p>
  </li>
  </ul>
  <p>So all I know is if I change document then the list should change. The code proves this behavior and the loop runs for 4 times despite my initial html collection being of length 9. Now when I replace the outerHTML with innerHTML then the loop for 9 times. So if the list should update with the document being changed, why does not this happen when I replace outerHTML with innerHTML</p>
  <pre><code>function expTble() {
  
  
      let tables = document.getElementsByTagName(&quot;table&quot;)
  
      let captions = document.getElementsByTagName(&quot;caption&quot;)
  
  
      if (captions.length &gt; 1) {
          
          console.log(`${tables.length} tables ${captions.length} captions`)
  
          for (let i = 0; i &lt; captions.length; i++) {
  
              console.log('index : ' + i)
           
              captions[i].outerHTML = ''
  
          }
  
          return
  
      }
  
      for (let i = 0; i &lt; tables.length; i++) {
          // Do stuffs
          TableExport(tables[i], { bootstrap: false })
      }
  
  
  
  }
  </code></pre>
  <p>Here is my result</p>
  <h2>When using outerHTML</h2>
  <pre><code>9 tables 9 captions 
  index : 0 
  index : 1 
  index : 2 
  index : 3 
  index : 4
  </code></pre>
  <h2>When using innerHTML</h2>
  <pre><code>9 tables 9 captions 
  index : 0 
  index : 1 
  index : 2 
  index : 3 
  index : 4 
  index : 5 
  index : 6 
  index : 7 
  index : 8
  </code></pre>