站长资源网页制作
html5中JavaScript removeChild 删除所有节点
简介假设div里有这么些内容： 复制代码代码如下: iScroll demo: simple</ti</div>
<div class="news_infos"><div id="MyContent">假设div里有这么些内容： <br><br><u>复制代码</u>代码如下: <br><!DOCTYPE html> <br><html> <br><head> <br><meta http-equiv="Content-Type" content="text/html;charset=GBK"> <br><title>iScroll demo: simple</title> <br><script type="text/javascript"> <br>function deleteData(){ <br>} <br></script> <br><style type="text/css" media="all"> <br>body,ul,li { <br>padding:0; <br>margin:0; <br>border:0; <br>} <br>body { <br>font-size:12px; <br>-webkit-user-select:none; <br>-webkit-text-size-adjust:none; <br>font-family:helvetica; <br>} <br></style> <br></head> <br><body> <br><div ><input type="submit" name="button" id="button" value="删除li节点" class="button gray" onclick="deleteData()" /> </div> <br><div > <br><ul id="thelist"> <br><li>Pretty row 1</li> <br><li>Pretty row 2</li> <br><li>Pretty row 3</li> <br><li>Pretty row 4</li> <br><li>Pretty row 5</li> <br><li>Pretty row 6</li> <br><li>Pretty row 7</li> <br><li>Pretty row 8</li> <br><li>Pretty row 9</li> <br><li>Pretty row 10</li> <br><li>Pretty row 40</li> <br></ul> <br></div> <br></body> <br></html> <br><br>现在要通过JavaScript的功能，将它们清空。 <br><br>虽然可以通过一句代码直接实现： <br><br>document.getElementById("content").innerHTML="" <br><br>但是本文里主要讨论 removeChild 函数。 <br><br>很想当然地以为借助下面的代码就能完成： <br><br><u>复制代码</u>代码如下: <br>function deleteData(){ <br>var el = document.getElementById('thelist'); <br>var liNodes = document.getElementsByTagName("li"); <br>alert(liNodes.length); <br>for(var i = 0; i < liNodes.length; i++){ <br>alert("删除"+i+" liNodes[i]="+ liNodes[i]); <br>el.removeChild(liNodes[i]); <br>//<-- el.removeChild(liNodes[i]); <br>} <br>} <br><br>没想到，点击了按钮后，竟然只清除掉1、3、5...，而2、4、6....竟然没有消失， <br><br>问题从一开始就产生了： <br><br>删除掉第一个节点后，后面节点的顺序全部发生了变化：原来的第二个节点往前蹭，成为新的第一个节点；原来的第三个节点，成为第二个节点…… <br><br>于是呢，接下来原本是要删除第二个节点的，却将最原始的第三个节点给删除掉了。 <br><br>最终，并没有全部删除，只删除掉1、3、5，留下了2、4、6。 <br><br>语法没有错误，但是得不到所要的结果，这就是算法上面的错误！该如何修正呢？ <br><br>“顺序删除”不行，那就“逆序删除”吧。将 for 语句修改一下： <br><br><u>复制代码</u>代码如下: <br>function deleteData(){ <br>var el = document.getElementById('thelist'); <br>var liNodes = document.getElementsByTagName("li"); <br>alert(liNodes.length); <br>for(var i = liNodes.length-1; i >=0; i--){ <br>alert("删除"+i+" liNodes[i]="+ liNodes[i]); <br>el.removeChild(liNodes[i]); <br>//<-- el.removeChild(liNodes[i]); <br>} <br>} <br><br>试试吧，成功了！还可以使用下面方法： <br><br><u>复制代码</u>代码如下: <br>function deleteData() { <br>var el = document.getElementById('thelist'); <br>var liNodes = document.getElementsByTagName("li"); <br>alert(liNodes.length); <br>for (var i=0;i<el.childNodes.length;i++){ <br>var childNode = el.childNodes[0]; //总是删除第一个，是不是更简单 <br>el.removeChild(childNode); <br>} <br>} <br><br>完成代码如下所示： <br><br><u>复制代码</u>代码如下: <br><!DOCTYPE html> <br><html> <br><head> <br><meta http-equiv="Content-Type" content="text/html;charset=GBK"> <br><title>iScroll demo: simple</title> <br><script type="text/javascript"> <br>function initData(){ <br>var el = document.getElementById('thelist'); <br>var liNodes = document.getElementsByTagName("li"); <br>alert(liNodes.length); <br>for(var i = liNodes.length-1; i >=0; i--){ <br>alert("删除"+i+" liNodes[i]="+ liNodes[i]); <br>el.removeChild(liNodes[i]); <br>//<-- el.removeChild(liNodes[i]); <br>} <br>} <br></script> <br><style type="text/css" media="all"> <br>body,ul,li { <br>padding:0; <br>margin:0; <br>border:0; <br>} <br>body { <br>font-size:12px; <br>-webkit-user-select:none; <br>-webkit-text-size-adjust:none; <br>font-family:helvetica; <br>} <br></style> <br></head> <br><body> <br><div ><input type="submit" name="button" id="button" value="删除li节点" class="button gray" onclick="initData()" /> </div> <br><div > <br><ul id="thelist"> <br><li>Pretty row 1</li> <br><li>Pretty row 2</li> <br><li>Pretty row 3</li> <br><li>Pretty row 4</li> <br><li>Pretty row 5</li> <br><li>Pretty row 6</li> <br><li>Pretty row 7</li> <br><li>Pretty row 8</li> <br><li>Pretty row 9</li> <br><li>Pretty row 10</li> <br><li>Pretty row 40</li> <br></ul> <br></div> <br></body> <br></html> <br></div>
</div>
</div>
<div class="share"> </div>
<div class="nextinfo">
<p>上一篇：<a href="http://m.paidiu.com/show/1/69457.html" title="html5设计原理(推荐收藏)">html5设计原理(推荐收藏)</a></p>
<p>下一篇：<a href="http://m.paidiu.com/show/1/69459.html" title="使用jTopo给Html5 Canva中绘制的元素添加鼠标事件">使用jTopo给Html5 Canva中绘制的元素添加鼠标事件</a></p>
</div>
<div class="otherlink">
<h2>最新资源</h2>
<ul>
<li><a href="/show/1/615856.html" title="何洛洛.2024-别叫醒我（EP）【光羽】【FLAC">何洛洛.2024-别叫醒我（EP）【光羽】【FLAC</a></li>
<li><a href="/show/1/615855.html" title="林忆莲.1996-爱莲说2CD【华纳】【WAV+CUE">林忆莲.1996-爱莲说2CD【华纳】【WAV+CUE</a></li>
<li><a href="/show/1/615854.html" title="黄妃.2005-红【亚律】【WAV+CUE】">黄妃.2005-红【亚律】【WAV+CUE】</a></li>
<li><a href="/show/1/615853.html" title="刘美麟《同生》[FLAC/分轨][161.95MB]">刘美麟《同生》[FLAC/分轨][161.95MB]</a></li>
<li><a href="/show/1/615852.html" title="群星《前途海量 电影原声专辑》[320K/MP3">群星《前途海量 电影原声专辑》[320K/MP3</a></li>
<li><a href="/show/1/615851.html" title="群星《前途海量 电影原声专辑》[FLAC/分轨">群星《前途海量 电影原声专辑》[FLAC/分轨</a></li>
<li><a href="/show/1/615850.html" title="张信哲.1992-知道新曲与精丫巨石】【WAV+">张信哲.1992-知道新曲与精丫巨石】【WAV+</a></li>
<li><a href="/show/1/615849.html" title="王翠玲.1995-ANGEL【新艺宝】【WAV+CUE】">王翠玲.1995-ANGEL【新艺宝】【WAV+CUE】</a></li>
<li><a href="/show/1/615848.html" title="景冈山.1996-我的眼里只有你【大地唱片】">景冈山.1996-我的眼里只有你【大地唱片】</a></li>
<li><a href="/show/1/615847.html" title="群星《八戒 电影原声带》[320K/MP3][188.">群星《八戒 电影原声带》[320K/MP3][188.</a></li>
</ul>
</div>
</div>
<div class="sidebar">
<div class="cloud"><h2 class="hometitle">一句话新闻</h2><a href="/show/1/603302.html"><ul>微软与英特尔等合作伙伴联合定义“AI PC”：键盘需配有Copilot物理按键<br><br>几个月来，英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法，朝着更多的AI功能迈进。在近日，英特尔在台北举行的开发者活动中，也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。<br>在此次发布会上，英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件，以及联合微软等合作伙伴联合定义“AI PC”的定义标准。</ul></a></div>
</div>
</article>
<footer>
<p style="font-size: 14px;">友情链接:<a href="http://www.imxmx.com/" title="杰晶网络" target="_blank">杰晶网络</a> <a href="http://www.ddrfans.com/" title="DDR爱好者之家" target="_blank">DDR爱好者之家</a> <a href="http://www.nqxw.com/" title="南强小屋" target="_blank">南强小屋</a> <a href="/" title="黑松山资源网" target="_blank">黑松山资源网</a> <a href="http://www.dyhadc.com/" title="白云城资源网" target="_blank">白云城资源网</a> <a href="/sitemap.xml">SiteMap</a></p>
<p>Design by <a href="http://m.paidiu.com">黑松山资源网</a> <a href="/">http://m.paidiu.com</a></p>
</footer>
<script src="/images/nav.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function() {
var elm = jQuery('#left_flow2');
var startPos = jQuery(elm).offset().top;
jQuery.event.add(window, "scroll", function() {
var p = jQuery(window).scrollTop();
jQuery(elm).css('position', ((p) > startPos) ? 'fixed' : '');
jQuery(elm).css('top', ((p) > startPos) ? '0' : '');
});
});
</script>
</body>
</html>