为什么removeChild函数的行为与列表项和i标记不同？

Question

I have noticed that removeChild does NOT behave as it does with other elements such as list item. I am using the i tag for some icons from frontAwesome and want these items removed individually when a button is clicked.

Unfortunately, I can only remove each i tag element only if I use removeChild() function twice. (Weird!)

What's going on?

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>

Here, there are 6 child nodes. Apparently, the LineBreaks are also considered as child nodes!

<ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>

Here, there are 3 child nodes. WEIRD - is this a bug?

Answer 1

From MDN ,

childNodes includes all child nodes, including non-element nodes like text and comment nodes. To get a collection of only elements, use ParentNode.children instead.

Hence, in both the cases, the elements are being removed weirdly. You should update

from

font.removeChild(font.childNodes[0]);

to

font.removeChild(font.children[0]);

For tweaking, https://codepen.io/anon/pen/aazoLK

Answer 2

Also.. if you notice both of your code closely on your link...

Code for <ul id="myList">

<ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>

We see no spaces between tags.

Whereas, Code for <div id="myFonts">

<div id="myFonts"> <i>1</i> <i>2</i> <i>3</i> <i>4</i> <i>5</i> </div>

You see the empty spaces before the <i> ? Those got added as a text node in the childNodes object of your div

<div id="myFonts"> <i>1</i> </div>

You could have used exactly the same code that you have currently, if you had chosen to rather Not add spaces before the <i> tags.

For Eg. like this:

<div id="myFonts"><i>1</i><i>2</i><i>3</i><i>4</i><i>5</i></div>

Check modified HTML for div here: CodePen