巅云智能建站平台搭建版(创业流派版)火爆上线,毕生受权!新增:文章智能收罗+全站真静态打包+都会分站+智能小法式+不法词过滤+H5自顺应+智能链词等功效功效概况
建站资讯News

html5中JavaScript removeChild 删除一切节点

0
一佰互联网站扶植(www.taishanly.com) 宣布时辰:2020-04-20 08:56:51 阅读数: 120
假定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>
一佰互联是天下着名建站品牌办事商,咱们有九年、网站建造、网页设想、php开辟和域名注册及假造主机办事经历,供给的办事更是天下着名。最近几年来还整合团队上风自立开辟了可视化多用户”“3.0平台版,拖拽排版网站建造设想,轻松完成pc站、手机微网站、小法式、APP一体化全网营销网站扶植 ,已胜利的为天下上百家收集公司供给自助建站平台搭建办事。更多资讯:tags标签

上一篇:html5设想道理(保举保藏)
下一篇: 利用jTopo给Html5 Canva中绘制的元素增加鼠标事务
[前往消息列表]

相干消息more

23
04月
设想交际媒体图片的25个收费东西_巅云自助建

交际媒体在营销和吸收方针受众方面表演侧主要的脚色。它被用来晋升一小我或夸大一个至公司。现实上,由图片组成的交际媒体帖子在Facebook上... >>概况

08
04月
能够是最周全的表单设想完整手册! - 网页设

表单设想能够说是设想界一个须生常谈的话题,针对它的主要性自不用多言。本文连系本身经历和所看所学所得总结,但愿能赞助到大师。从「因子(组成要件... >>概况

04
04月
交互设想知识—设想经常利用模子阐发(一)

简介:“工欲善其事,必先利其器”;作为设想职员来讲,设想体例和设想模子便是赞助咱们更好做设想的利器。就像厨师做菜时辰的菜谱一样;面临新的菜种... >>概况

09
05月
若何建造完美的搜索引擎优化网站优化计划

站长拿到网站优化的时,不是拿到一个网站就去做关头词做外链,第一步应是要去领会网站,建造可履行的网站优化计划。那要想建造份完美的网站优化计划,... >>概况

高端网站扶植

美工统筹SEO,为企业电子商务营销助力!

德律风:

023-85725751
建站

产物

域名注册 假造主机 云办事器 企业邮局
智能建站 APP打包 微站/小法式 创业平台
网站推行 媒体营销 智能收罗 AI机械人
400德律风 短信营销 店销机械人
私家定制 流派网站