Xiao_molory
2016-07-16 10:21
采纳率: 66.7%
浏览 1.0k
已采纳

一个简单的Javascript问题

这是一段实现添加或删除列表项的代码,我想问为什么点击“删除”时,如果是新添加的项就只需要点一次,而原本存在的项(也就是其中的"A1"、"A2"、"A3"项)就必须点两次呢?此外,当myUL中已经没有子节点了,再点"删除"按钮却没有执行else里的内容(也就是alert命令),这是为啥??
求解惑!~

 <!DOCTYPE html >

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Javascript</title>
    <script type="text/javascript">
        function insert() {
            var newLi = document.createElement("li");
            var text = document.createTextNode(document.getElementById("input1").value);
            newLi.appendChild(text);
            var temp = document.getElementById("myUL");
            temp.appendChild(newLi);
        }
        function dele() {
            var t = document.getElementById("myUL");
            if (t.hasChildNodes) {
                t.removeChild(t.lastChild);
            }
            else {
                alert("已经没有可删除项!");
            }
        }
    </script>
</head>

<body>
         <div style="width:300px; height:300px; overflow:auto;">  
            <ul id="myUL">
                <li>A1</li>
                <li>A2</li>
                <li>A3</li>
            </ul>
         </div>
          添加新的内容:<input id="input1" type="text" />
            <input  type="button" value="添加新项" onclick="insert()" />
            <input  type="button" value="删除项目" onclick="dele()" />
</body>
</html>
  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • 已采纳

    空白字符也算一个节点,你的a1~a3后由换行,所以需要点击2次。

    改成下面的结构

             <ul id="myUL"><li>A1</li><li>A2</li><li>A3</li></ul>
    

    ,或者代码改成下面的

           function dele() {
                var t = document.getElementById("myUL");
                var li=t.getElementsByTagName('li')
                if (li.length>0) {
                    t.removeChild(li[li.length-1]);
                }
                else {
                    alert("已经没有可删除项!");
                }
            }
    
    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • Xiao_molory 2016-07-16 10:20

    T.T 感觉代码没有写错呀

    评论
    解决 无用
    打赏 举报
  • RunningManWY 2016-07-16 16:41

    实质上是因为换行以后dom节点会多一个‘空白节点‘ ,而后续增加的代码内部不会添加换行就不会有空白节点了。

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题