DOM中删除一个节点，需要点击两次的问题

< body >

< ul id = "my" >

        < li >Default Nodes1</ li >

        < li >Default Nodes2</ li >

        < li >Default Nodes3</ li >

    </ ul >

    < input type = "button" value = "Remove" onclick = "remove()" >

    < script >

        function remove () {

            var ul = document. getElementById ( "my" );

            var li = ul.firstChild;

            ul. removeChild (li);

        }

    < / script >

body >

在 上面的例子中我们使用了firstChild方法来定位到需要删除的节点，但是在Chrome和IE浏览器（Edge浏览器里会那个Button按钮会被删除，

不知道是什么原因）里需要点击两次才能删除。当然这也是针对文档中原来就有的HTML元素（DOM节点），

如果是通过脚本动态添加的节点就不会出现这个问题。

通过在工具中调试，发现my.firstChild输出的是一个#text(Chrome)或EmptyTextNode(IE&Edge),这应该是浏览器解析时出现的空白节点，

也是出现两次点击的原因。

解决该问题的方法也比较简单比如上面代码中把li代码部分改为这样的形式<li></li><li></li>几个去掉空白节点，

只是这样html文档的结构可读性要差些。

另外，还有一个方法firstElementChild，使用这个方法就不会出现上面的问题，点击一次即可删除节点。该方法在Edge中存在着同样的问题，无法删除节点。