title: JavaScript - weird bug doesn't remove element
body: <p>I have a weird problem with my simple to-do app. Its main features are adding new elements to "ul" and clicking on "li" to change its class. After clicking element it also adds an "i" with font-awesome icon and after clicking it again it should remove it. It works fine when I click added elements from top to bottom, but when I click from bottom to top, "i" is removed only from the first element from top. I can't figure out why is that, so I would appreciate any help.</p>
  
  <p>Here is live demo where you can reproduce this bug:
  <a href="https://michalgrochowski.github.io/to-do/" rel="nofollow noreferrer">https://michalgrochowski.github.io/to-do/</a></p>
  
  <p>And here is the code responsible for that action:</p>
  
  <pre><code>document.getElementById("list").addEventListener("click", function(e) {
    if (e.target &amp;&amp; e.target.matches("li.item")) { 
      e.target.className = "itemDone"; 
      var check = document.createElement("i");
      check.className = "fa fa-check done"; 
      e.target.appendChild(check); 
    } else if (e.target &amp;&amp; e.target.matches("li.itemDone")) {
      e.target.className = "item"; 
      var done = document.getElementsByClassName("done");
      var i;
      for (i = 0; i &lt; done.length; i++) {
         e.target.removeChild(done[i]);
      };
    };
  });
  </code></pre>
  
  <p>I've tested it in firefox and chrome, so it's not browser-related, it must be something in the code. I was thinking maybe the problem is with the loop inside the function, but I don't know how to change it.</p>