哪位大牛帮忙解决下JavaScript的问题？deleteE为什么不能把li的全部元素删除？且删到最后始终保持19个元素？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" type="text/css" href="A1.css" />
        <title>javascript</title>
        <script type="text/javascript">
            function addmenu(str){
                var li = document.createElement("li");
                li.innerHTML = str;
                var ul = document.getElementById("ul");
                ul.appendChild(li);
            }
            
            function deleteE(){
                var w = document.getElementById("ul");
                var q = w.getElementsByTagName("li");
                //for (var i = 0; i < q.length; i++) {
                    w.removeChild(q);
                //}
                
            }
            
            function test(){
                var d1 = document.getElementById("d1");
                var li = d1.getElementsByTagName("li");
                for (var i = 0; i < li.length; i++) {
                    // alert(arry[i].innerHTML);
                    (function(){
                        var j = i;
                        li[i].onclick = function(){
                            deleteE();
                            for (var k = 0; k < 10; k++) {
                                addmenu("hello" + j);
                            }
                        }
                    })();
                }
            }
        </script>
    </head>
    <body onload="test();">
        <div id="topmenu">
            <ul id="d1">
                <li class="current">
                    <a href="#">首页</a>
                </li>
                <li>
                    <a href="#">订单管理</a>
                </li>
                <li>
                    <a href="#">用户管理</a>
                </li>
                <li>
                    <a href="#">客户关系</a>
                </li>
                <li>
                    <a href="#">统计报表</a>
                </li>
                <li>
                    <a href="#">系统设置</a>
                </li>
            </ul>
        </div>
        <div id="leftmenu">
            <ul id="ul">
                <li class="current">
                    <a href="#">首页</a>
                </li>
                <li>
                    <a href="#">订单管理</a>
                </li>
                <li>
                    <a href="#">用户管理</a>
                </li>
                <li>
                    <a href="#">客户关系</a>
                </li>
                <li>
                    <a href="#">统计报表</a>
                </li>
                <li>
                    <a href="#">系统设置</a>
                </li>
            </ul>
        </div>
        <input type="button" value="add" onclick="deleteE()">
    </body>
</html>

解决方案 »

  1.   

    源码是这样的<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <link rel="stylesheet" type="text/css" href="A1.css" />
            <title>javascript</title>
            <script type="text/javascript">
                function addmenu(str){
                    var li = document.createElement("li");
                    li.innerHTML = str;
                    var ul = document.getElementById("ul");
                    ul.appendChild(li);
                }
                
                function deleteE(){
                    var w = document.getElementById("ul");
                    var q = w.getElementsByTagName("li");
                    for (var i = 0; i < q.length; i++) {
                        w.removeChild(q[i]);
                    }
                    
                }
                
                function test(){
                    var d1 = document.getElementById("d1");
                    var li = d1.getElementsByTagName("li");
                    for (var i = 0; i < li.length; i++) {
                        // alert(arry[i].innerHTML);
                        (function(){
                            var j = i;
                            li[i].onclick = function(){
                                deleteE();
                                for (var k = 0; k < 10; k++) {
                                    addmenu("hello" + j);
                                }
                            }
                        })();
                    }
                }
            </script>
        </head>
        <body onload="test();">
            <div id="topmenu">
                <ul id="d1">
                    <li class="current">
                        <a href="#">首页</a>
                    </li>
                    <li>
                        <a href="#">订单管理</a>
                    </li>
                    <li>
                        <a href="#">用户管理</a>
                    </li>
                    <li>
                        <a href="#">客户关系</a>
                    </li>
                    <li>
                        <a href="#">统计报表</a>
                    </li>
                    <li>
                        <a href="#">系统设置</a>
                    </li>
                </ul>
            </div>
            <div id="leftmenu">
                <ul id="ul">
                    <li class="current">
                        <a href="#">首页</a>
                    </li>
                    <li>
                        <a href="#">订单管理</a>
                    </li>
                    <li>
                        <a href="#">用户管理</a>
                    </li>
                    <li>
                        <a href="#">客户关系</a>
                    </li>
                    <li>
                        <a href="#">统计报表</a>
                    </li>
                    <li>
                        <a href="#">系统设置</a>
                    </li>
                </ul>
            </div>
            <input type="button" value="add" onclick="deleteE()">
        </body>
    </html>
      

  2.   

    function deleteE(){
      var w = document.getElementById("ul");
      var w2 = document.getElementById("d1");
      var q = w.getElementsByTagName("li");
      var q2 = w2.getElementsByTagName("li");
      for (var i = q.length-1; i >= 0; i--) {
    w.removeChild(q[i]);
    w2.removeChild(q2[i]);
      }    
      }
      

  3.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <link rel="stylesheet" type="text/css" href="A1.css" />
      <title>javascript</title>
      <script type="text/javascript">
      function addmenu(str){
      var li = document.createElement("li");
      li.innerHTML = str;
      var ul = document.getElementById("ul");
      ul.appendChild(li);
      }
       
      function deleteE(){
      var w = document.getElementById("ul");
      var q = w.getElementsByTagName("li");
      for (var i = 0; i < q.length; i++) {
      w.removeChild(q[i]);
       i--;
      }
       
      }
       
      function test(){
      var d1 = document.getElementById("d1");
      var li = d1.getElementsByTagName("li");
      for (var i = 0; i < li.length; i++) {
      // alert(arry[i].innerHTML);
      (function(){
      var j = i;
      li[i].onclick = function(){
      deleteE();
      for (var k = 0; k < 10; k++) {
      addmenu("hello" + j);
      }
      }
      })();
      }
      }
      </script>
      </head>
      <body onload="test();">
      <div id="topmenu">
      <ul id="d1">
      <li class="current">
      <a href="#">首页</a>
      </li>
      <li>
      <a href="#">订单管理</a>
      </li>
      <li>
      <a href="#">用户管理</a>
      </li>
      <li>
      <a href="#">客户关系</a>
      </li>
      <li>
      <a href="#">统计报表</a>
      </li>
      <li>
      <a href="#">系统设置</a>
      </li>
      </ul>
      </div>
      <div id="leftmenu">
      <ul id="ul">
      <li class="current">
      <a href="#">首页</a>
      </li>
      <li>
      <a href="#">订单管理</a>
      </li>
      <li>
      <a href="#">用户管理</a>
      </li>
      <li>
      <a href="#">客户关系</a>
      </li>
      <li>
      <a href="#">统计报表</a>
      </li>
      <li>
      <a href="#">系统设置</a>
      </li>
      </ul>
      </div>
      <input type="button" value="add" onclick="deleteE()">
      </body>
    </html>
    删除的时候记得子元素的数量要变