It has come to my attention that the removeChild function does not behave in the same way with all elements, particularly when dealing with list items. I am currently using the i tag for icons from frontAwesome and would like to individually remove these items when a button is clicked.
Strangely, I have found that I can only remove each i tag element by calling the removeChild() function twice. Why is this happening?
HTML:
<div id="myFonts">
<i>1</i>
<i>2</i>
<i>3</i>
<i>4</i>
<i>5</i>
</div>
Javascript:
function FunctionTwo() {
var font = document.getElementById("myFonts");
font.removeChild(font.childNodes[0]);
}
https://codepen.io/anon/pen/EeaYvL
EDIT Note: It makes a difference if you use LineBreaks or not!
<ul id="myList">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
In this example, there are 6 child nodes because LineBreaks are also counted as child nodes!
<ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>
Surprisingly, in this case, there are only 3 child nodes. Is this a bug? Quite weird!