如果 div 里有这么些内容:
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta http-equiv="Content-Type" content="text/html;charset=GBK">
- <title>
- iScroll demo: simple
- </title>
- <script type="text/javascript">
- function deleteData() { ? ?
- } ?
- </script>
- <style type="text/CSS" media="all">
- body,ul,li { padding:0; margin:0; border:0; } body { font-size:12px; -webkit-user-select:none;
- ? ? -webkit-text-size-adjust:none; font-family:helvetica; }
- </style>
- </head>
- <body>
- ?
- <div>
- <input type="submit" name="button" id="button" value="删除 li 节点" class="button gray"
- ?onclick="deleteData()" />
- </div>
- ? ?
- <div>
- ?
- <ul id="thelist">
- ? ?
- <li>
- Pretty row 1
- </li>
- <li>
- Pretty row 2
- </li>
- <li>
- Pretty row 3
- </li>
- <li>
- Pretty row 4
- </li>
- <li>
- Pretty row 5
- </li>
- <li>
- Pretty row 6
- </li>
- <li>
- Pretty row 7
- </li>
- <li>
- Pretty row 8
- </li>
- <li>
- Pretty row 9
- </li>
- <li>
- Pretty row 10
- </li>
- <li>
- Pretty row 40
- </li>
- ? ?
- </ul>
- </div>
- </body>
- </HTML>
如今要通过 JavaScript 的功能. 将它们清空.
尽管能够通过一句代码直接实现:
document.getElementById("content").innerHTML=""
可是本文里主要讨论 removeChild 函数.
非常想当然地以为借助以下的代码就能完毕:
- function deleteData(){
- ?
- ? ? ?? ??
- ? ??? ? var el = document.getElementById('thelist');
- ? ? ? ? var liNodes = document.getElementsByTagName("li");
- ? ? ? ? ? alert(liNodes.length); ??
- ? ? ? ? ???for(var i = 0; i <liNodes.length; i++){
- ?
- ? ? ? ? ? ? ? ?alert("删除"+i+"? liNodes[i]="+ liNodes[i]); ??
- ? ? ? ? ? ? ? ? ?el.removeChild(liNodes[i]); ? ? ? ? ? ? ? ?
- ? ? ? ? ? ? ? //<-- ?el.removeChild(liNodes[i]); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
- ? ? ? ? ? ? ? ?
- }?
- ?
- }?
没想到, 点击了按钮后. 居然仅仅清除掉 1,3,5..., 而 2,4,6.... 居然没有消失,
问题从一開始就产生了:
删除掉第一个节点后, 后面节点的顺序所有发生了变化: 原来的第二个节点往前蹭, 成为新的第一个节点; 原来的第三个节点, 成为第二个节点......
于是呢, 接下来原本是要删除第二个节点的, 却将最原始的第三个节点给删除掉了.
终于, 并没有所有删除, 仅仅删除掉 1,3,5. 留下了 2,4,6.
语法没有错误, 可是得不到所要的结果, 这就是算法上面的错误!
该怎样修正呢?
"顺序删除" 不行, 那就 "逆序删除" 吧. 将 for 语句改动一下:
- function deleteData(){
- ?
- ? ?var el = document.getElementById('thelist');
- ? ? ? ? var liNodes = document.getElementsByTagName("li");
- ? ? ? ? ? alert(liNodes.length); ??
- ? ? ? ? ? ? ?for(var i = liNodes.length-1; i>=0; i--){
- ??
- ? ? ? ? ? ? ? ?alert("删除"+i+"? liNodes[i]="+ liNodes[i]); ??
- ? ? ? ? ? ? ? ? ?el.removeChild(liNodes[i]); ? ? ? ? ? ? ? ?
- ? ? ? ? ? ? ? //<-- ?el.removeChild(liNodes[i]); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
- ? ? ? ? ? ? ? ?
- } ? ? ? ?
- ?
- } ?
试试吧, 成功了. 还能够使用以下方法:
- function deleteData() {
- ??var el = document.getElementById('thelist');
- ? ? ? ? var liNodes = document.getElementsByTagName("li");
- ? ? ? ? ? alert(liNodes.length); ??
- for (var i=0;i<el.childNodes.length;i++){
- ?var childNode = el.childNodes[0];? // 总是删除第一个, 是不是更简单
- ?el.removeChild(childNode);
- }
- }
完毕代码例如以下所看到的:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta http-equiv="Content-Type" content="text/html;charset=GBK">
- <title>
- iScroll demo: simple
- </title>
- <script type="text/javascript">
- function initData() { ? ??
- var el = document.getElementById('thelist'); ? ???
- var liNodes = document.getElementsByTagName("li"); ? ????alert(liNodes.length); ? ????????
- for (var i = liNodes.length - 1; i >= 0; i--) { ? ?????????alert("删除" + i + "? liNodes[i]=" + liNodes[i]); ? ??????????el.removeChild(liNodes[i]); ? ?????????????? //<-- ?el.removeChild(liNodes[i]); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
- ? ???????
- } ? ????
- } ?
- </script>
- <style type="text/css" media="all">
- body,ul,li { padding:0; margin:0; border:0; } body { font-size:12px; -webkit-user-select:none;
- ? ? -webkit-text-size-adjust:none; font-family:helvetica; }
- </style>
- </head>
- <body>
- ?
- <div>
- <input type="submit" name="button" id="button" value="删除 li 节点" class="button gray"
- ?onclick="initData()" />
- </div>
- ? ?
- <div>
- ?
- <ul id="thelist">
- ? ?
- <li>
- Pretty row 1
- </li>
- <li>
- Pretty row 2
- </li>
- <li>
- Pretty row 3
- </li>
- <li>
- Pretty row 4
- </li>
- <li>
- Pretty row 5
- </li>
- <li>
- Pretty row 6
- </li>
- <li>
- Pretty row 7
- </li>
- <li>
- Pretty row 8
- </li>
- <li>
- Pretty row 9
- </li>
- <li>
- Pretty row 10
- </li>
- <li>
- Pretty row 40
- </li>
- ? ?
- </ul>
- </div>
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-3038724.html