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

一个简单的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条回答 默认 最新

  • Go 旅城通票 2016-07-16 10:34
    关注

    空白字符也算一个节点,你的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("已经没有可删除项!");
                }
            }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥15 Power query添加列问题
  • ¥50 Kubernetes&Fission&Eleasticsearch
  • ¥15 有没有帮写代码做实验仿真的
  • ¥15 報錯:Person is not mapped,如何解決?
  • ¥30 vmware exsi重置后登不上
  • ¥15 易盾点选的cb参数怎么解啊
  • ¥15 MATLAB运行显示错误,如何解决?
  • ¥15 c++头文件不能识别CDialog
  • ¥15 Excel发现不可读取的内容
  • ¥15 关于#stm32#的问题:CANOpen的PDO同步传输问题