清楚节点间的html代码,html5中JavaScript removeChild 删除所有节点

最新推荐文章于 2023-10-18 18:51:24 发布
最新推荐文章于 2023-10-18 18:51:24 发布
阅读量204 收藏
点赞数
文章标签： 清楚节点间的html代码

点评：通过JavaScript可以删除所有节点，本文里主要讨论 removeChild 函数，大家可以看看下面的示例假设div里有这么些内容： nP9HTML5中文学习网 - HTML5先行者学习网

代码如下: nP9HTML5中文学习网 - HTML5先行者学习网

nP9HTML5中文学习网 - HTML5先行者学习网

nP9HTML5中文学习网 - HTML5先行者学习网

nP9HTML5中文学习网 - HTML5先行者学习网

iScroll demo: simple nP9HTML5中文学习网 - HTML5先行者学习网

function deleteData(){ nP9HTML5中文学习网 - HTML5先行者学习网

} nP9HTML5中文学习网 - HTML5先行者学习网

nP9HTML5中文学习网 - HTML5先行者学习网

body,ul,li { nP9HTML5中文学习网 - HTML5先行者学习网

padding:0; nP9HTML5中文学习网 - HTML5先行者学习网

margin:0; nP9HTML5中文学习网 - HTML5先行者学习网

border:0; nP9HTML5中文学习网 - HTML5先行者学习网

} nP9HTML5中文学习网 - HTML5先行者学习网

body { nP9HTML5中文学习网 - HTML5先行者学习网

font-size:12px; nP9HTML5中文学习网 - HTML5先行者学习网

-webkit-user-select:none; nP9HTML5中文学习网 - HTML5先行者学习网

-webkit-text-size-adjust:none; nP9HTML5中文学习网 - HTML5先行者学习网

font-family:helvetica; nP9HTML5中文学习网 - HTML5先行者学习网

} nP9HTML5中文学习网 - HTML5先行者学习网

nP9HTML5中文学习网 - HTML5先行者学习网

nP9HTML5中文学习网 - HTML5先行者学习网

nP9HTML5中文学习网 - HTML5先行者学习网
  • nP9HTML5中文学习网 - HTML5先行者学习网
  • Pretty row 1 nP9HTML5中文学习网 - HTML5先行者学习网
  • Pretty row 2 nP9HTML5中文学习网 - HTML5先行者学习网
  • Pretty row 3 nP9HTML5中文学习网 - HTML5先行者学习网
  • Pretty row 4 nP9HTML5中文学习网 - HTML5先行者学习网
  • Pretty row 5 nP9HTML5中文学习网 - HTML5先行者学习网
  • Pretty row 6 nP9HTML5中文学习网 - HTML5先行者学习网
  • Pretty row 7 nP9HTML5中文学习网 - HTML5先行者学习网
  • Pretty row 8 nP9HTML5中文学习网 - HTML5先行者学习网
  • Pretty row 9 nP9HTML5中文学习网 - HTML5先行者学习网
  • Pretty row 10 nP9HTML5中文学习网 - HTML5先行者学习网
  • Pretty row 40 nP9HTML5中文学习网 - HTML5先行者学习网
nP9HTML5中文学习网 - HTML5先行者学习网
nP9HTML5中文学习网 - HTML5先行者学习网

nP9HTML5中文学习网 - HTML5先行者学习网

nP9HTML5中文学习网 - HTML5先行者学习网

nP9HTML5中文学习网 - HTML5先行者学习网

现在要通过JavaScript的功能，将它们清空。 nP9HTML5中文学习网 - HTML5先行者学习网

nP9HTML5中文学习网 - HTML5先行者学习网

虽然可以通过一句代码直接实现： nP9HTML5中文学习网 - HTML5先行者学习网

nP9HTML5中文学习网 - HTML5先行者学习网

document.getElementById("content").innerHTML="" nP9HTML5中文学习网 - HTML5先行者学习网

nP9HTML5中文学习网 - HTML5先行者学习网

但是本文里主要讨论 removeChild 函数。 nP9HTML5中文学习网 - HTML5先行者学习网

nP9HTML5中文学习网 - HTML5先行者学习网

很想当然地以为借助下面的代码就能完成： nP9HTML5中文学习网 - HTML5先行者学习网

代码如下: nP9HTML5中文学习网 - HTML5先行者学习网

function deleteData(){ nP9HTML5中文学习网 - HTML5先行者学习网

var el = document.getElementById('thelist'); nP9HTML5中文学习网 - HTML5先行者学习网

var liNodes = document.getElementsByTagName("li"); nP9HTML5中文学习网 - HTML5先行者学习网

alert(liNodes.length); nP9HTML5中文学习网 - HTML5先行者学习网

for(var i = 0; i < liNodes.length; i++){ nP9HTML5中文学习网 - HTML5先行者学习网

alert("删除"+i+" liNodes[i]="+ liNodes[i]); nP9HTML5中文学习网 - HTML5先行者学习网

el.removeChild(liNodes[i]); nP9HTML5中文学习网 - HTML5先行者学习网

//

} nP9HTML5中文学习网 - HTML5先行者学习网

} nP9HTML5中文学习网 - HTML5先行者学习网

nP9HTML5中文学习网 - HTML5先行者学习网

没想到，点击了按钮后，竟然只清除掉1、3、5...，而2、4、6....竟然没有消失， nP9HTML5中文学习网 - HTML5先行者学习网

nP9HTML5中文学习网 - HTML5先行者学习网

问题从一开始就产生了： nP9HTML5中文学习网 - HTML5先行者学习网

nP9HTML5中文学习网 - HTML5先行者学习网

删除掉第一个节点后，后面节点的顺序全部发生了变化：原来的第二个节点往前蹭，成为新的第一个节点；原来的第三个节点，成为第二个节点…… nP9HTML5中文学习网 - HTML5先行者学习网

nP9HTML5中文学习网 - HTML5先行者学习网

于是呢，接下来原本是要删除第二个节点的，却将最原始的第三个节点给删除掉了。 nP9HTML5中文学习网 - HTML5先行者学习网

nP9HTML5中文学习网 - HTML5先行者学习网

最终，并没有全部删除，只删除掉1、3、5，留下了2、4、6。 nP9HTML5中文学习网 - HTML5先行者学习网

nP9HTML5中文学习网 - HTML5先行者学习网

语法没有错误，但是得不到所要的结果，这就是算法上面的错误！该如何修正呢？ nP9HTML5中文学习网 - HTML5先行者学习网

nP9HTML5中文学习网 - HTML5先行者学习网

“顺序删除”不行，那就“逆序删除”吧。将 for 语句修改一下： nP9HTML5中文学习网 - HTML5先行者学习网

代码如下: nP9HTML5中文学习网 - HTML5先行者学习网

function deleteData(){ nP9HTML5中文学习网 - HTML5先行者学习网

var el = document.getElementById('thelist'); nP9HTML5中文学习网 - HTML5先行者学习网

var liNodes = document.getElementsByTagName("li"); nP9HTML5中文学习网 - HTML5先行者学习网

alert(liNodes.length); nP9HTML5中文学习网 - HTML5先行者学习网

for(var i = liNodes.length-1; i >=0; i--){ nP9HTML5中文学习网 - HTML5先行者学习网

alert("删除"+i+" liNodes[i]="+ liNodes[i]); nP9HTML5中文学习网 - HTML5先行者学习网

el.removeChild(liNodes[i]); nP9HTML5中文学习网 - HTML5先行者学习网

//

} nP9HTML5中文学习网 - HTML5先行者学习网

} nP9HTML5中文学习网 - HTML5先行者学习网

nP9HTML5中文学习网 - HTML5先行者学习网

试试吧，成功了！还可以使用下面方法： nP9HTML5中文学习网 - HTML5先行者学习网

代码如下: nP9HTML5中文学习网 - HTML5先行者学习网

function deleteData() { nP9HTML5中文学习网 - HTML5先行者学习网

var el = document.getElementById('thelist'); nP9HTML5中文学习网 - HTML5先行者学习网

var liNodes = document.getElementsByTagName("li"); nP9HTML5中文学习网 - HTML5先行者学习网

alert(liNodes.length); nP9HTML5中文学习网 - HTML5先行者学习网

for (var i=0;i

var childNode = el.childNodes[0]; //总是删除第一个，是不是更简单 nP9HTML5中文学习网 - HTML5先行者学习网

el.removeChild(childNode); nP9HTML5中文学习网 - HTML5先行者学习网

} nP9HTML5中文学习网 - HTML5先行者学习网

} nP9HTML5中文学习网 - HTML5先行者学习网

nP9HTML5中文学习网 - HTML5先行者学习网

完成代码如下所示： nP9HTML5中文学习网 - HTML5先行者学习网

代码如下: nP9HTML5中文学习网 - HTML5先行者学习网

nP9HTML5中文学习网 - HTML5先行者学习网

nP9HTML5中文学习网 - HTML5先行者学习网

nP9HTML5中文学习网 - HTML5先行者学习网

iScroll demo: simple nP9HTML5中文学习网 - HTML5先行者学习网

function initData(){ nP9HTML5中文学习网 - HTML5先行者学习网

var el = document.getElementById('thelist'); nP9HTML5中文学习网 - HTML5先行者学习网

var liNodes = document.getElementsByTagName("li"); nP9HTML5中文学习网 - HTML5先行者学习网

alert(liNodes.length); nP9HTML5中文学习网 - HTML5先行者学习网

for(var i = liNodes.length-1; i >=0; i--){ nP9HTML5中文学习网 - HTML5先行者学习网

alert("删除"+i+" liNodes[i]="+ liNodes[i]); nP9HTML5中文学习网 - HTML5先行者学习网

el.removeChild(liNodes[i]); nP9HTML5中文学习网 - HTML5先行者学习网

//<-- el.removeChild(liNodes[i]); nP9HTML5中文学习网 - HTML5先行者学习网

} nP9HTML5中文学习网 - HTML5先行者学习网

} nP9HTML5中文学习网 - HTML5先行者学习网

nP9HTML5中文学习网 - HTML5先行者学习网

body,ul,li { nP9HTML5中文学习网 - HTML5先行者学习网

padding:0; nP9HTML5中文学习网 - HTML5先行者学习网

margin:0; nP9HTML5中文学习网 - HTML5先行者学习网

border:0; nP9HTML5中文学习网 - HTML5先行者学习网

} nP9HTML5中文学习网 - HTML5先行者学习网

body { nP9HTML5中文学习网 - HTML5先行者学习网

font-size:12px; nP9HTML5中文学习网 - HTML5先行者学习网

-webkit-user-select:none; nP9HTML5中文学习网 - HTML5先行者学习网

-webkit-text-size-adjust:none; nP9HTML5中文学习网 - HTML5先行者学习网

font-family:helvetica; nP9HTML5中文学习网 - HTML5先行者学习网

} nP9HTML5中文学习网 - HTML5先行者学习网

nP9HTML5中文学习网 - HTML5先行者学习网

nP9HTML5中文学习网 - HTML5先行者学习网

nP9HTML5中文学习网 - HTML5先行者学习网
  • nP9HTML5中文学习网 - HTML5先行者学习网
  • Pretty row 1 nP9HTML5中文学习网 - HTML5先行者学习网
  • Pretty row 2 nP9HTML5中文学习网 - HTML5先行者学习网
  • Pretty row 3 nP9HTML5中文学习网 - HTML5先行者学习网
  • Pretty row 4 nP9HTML5中文学习网 - HTML5先行者学习网
  • Pretty row 5 nP9HTML5中文学习网 - HTML5先行者学习网
  • Pretty row 6 nP9HTML5中文学习网 - HTML5先行者学习网
  • Pretty row 7 nP9HTML5中文学习网 - HTML5先行者学习网
  • Pretty row 8 nP9HTML5中文学习网 - HTML5先行者学习网
  • Pretty row 9 nP9HTML5中文学习网 - HTML5先行者学习网
  • Pretty row 10 nP9HTML5中文学习网 - HTML5先行者学习网
  • Pretty row 40 nP9HTML5中文学习网 - HTML5先行者学习网
nP9HTML5中文学习网 - HTML5先行者学习网
nP9HTML5中文学习网 - HTML5先行者学习网

nP9HTML5中文学习网 - HTML5先行者学习网

nP9HTML5中文学习网 - HTML5先行者学习网

nP9HTML5中文学习网 - HTML5先行者学习网

这就是微学网-程序员之家为你提供的"html5中JavaScript removeChild 删除所有节点"希望对你有所帮助.本文来自网络，转载请注明出处：http://www.weixuecn.cn/article/6762.html

一只爪子
关注
html5中JavaScript removeChild 删除所有节点
12-14
假设div里有这么些内容： 复制代码代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv=”Content-Type” content=”text/html;charset=GBK”> <title>iScroll demo: simple</title> [removed] function deleteData(){ } [removed] <style type=”text/css” media=”all”> body,ul,li { padding:0; margin:0; border:
js原生移除html,html5中JavaScript removeChild 删除所有节点
weixin_39624873的博客
05-31 349
iScroll demo: simplefunction deleteData(){}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;}Pretty row 1Prett...
html清空默认功能,清空元素html("") innerHTML="" 与 empty()的区别和应用(推荐)
weixin_42511024的博客
06-24 805
一、清空元素的区别1、错误做法一：$("#test").html("");//该做法会导致内存泄露2、错误做法二：$("#test")[0].innerHTML=""; ;//该做法会导致内存泄露3、正确做法：//$("#test").empty();二、原理：在 jQuery 中用 innerHTML 的方法来清空元素，是必然会导致内存泄露的，由于 jquery 对于同一元素多事件处理没有直接...
HTML5游戏引擎（六）-添加与删除显示对象——添加显示对象到显示列表-addChild & 删除显示对象-removeChild
weixin_44867717的博客
12-06 456
HTML5游戏引擎（六）-添加与删除显示对象——添加显示对象到显示列表-addChild & 删除显示对象-removeChild 添加与删除显示对象 在Egret中建立显示对象和渲染显示对象是两个过程。建立显示对象后，对象会处于内存中，但不会参与渲染过程，只有把显示对象放到显示列表后，显示对象才会参与渲染过程。如果想将某个显示对象从渲染过程中删除，只需要将其移除显示列表即可。 添加显示对象到显示列表 当创建一个显示对象后，就可以将其添加到显示列表中，首先绘制一个Sprite，这个Sprite是一个
JavaScript dom节点基本操作
tlmis的博客
12-10 177
增 1:parentEl.appendChild() 2:parentEl.insertBefore(new,parentEl.child); 删 1:parentEl.removeChild() 改 1:parentEl.replaceChild(new,old) 克隆 1:el.cloneNode() 返回克隆内容 true 表示克隆el 以及el子节点 false 只克隆el本身 查 获...
Javascript removeChild()删除节点及删除子节点的方法
10-23
总的来说，`removeChild()`是JavaScript中实现DOM节点删除操作的唯一方法，它能够有效地从DOM结构中移除指定的子节点。掌握它的工作原理及使用技巧对于进行Web开发是必不可少的。在实际操作中，要注意遍历和删除子...
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
10-20
总的来说，JavaScript DOM节点操作是Web开发中不可或缺的一部分，无论是新建元素来增加页面内容，还是删除元素来实现动态更新，都体现了JavaScript在网页动态化方面的强大能力。在实际项目中，开发者还需要注意性能...
javascript删除一个html元素节点的方法
10-25
在JavaScript中，删除HTML元素节点是一项常见的操作，特别是在动态构建页面或者进行DOM操作时。本文将详细介绍如何使用原生JavaScript来删除一个特定的HTML元素节点。 首先，我们需要了解DOM（Document Object ...
清除父节点中所有子节点的三种方法
qq_39706777的博客
11-18 5725
1.innerHTML Node.innerHTML = "" 将Node节点的innerHTML置为空，就清空了Node节点 innerHTML 是一个字符串，用来设置或获取位于对象起始和结束标签内的HTML 2.remove() + 循环 获取Node节点里的第一个子节点，子节点调用remove()删除自己，循环执行直到Node没有子节点。 while(Node.firstChild){ Node.firstChild.remove() } 3.removeChild() + 循环 获取No
使用JS删除HTML元素的两种方法
最新发布
sejinan的博客
10-18 4624
使用removeChild()方法删除HTML元素。：使用remove()方法从文档中删除HTML元素。
Vue自定义指令
me_never的博客
10-03 546
// 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() } }) 如果想注册局部指令，组件中也接受一个 directives 的选项： directives: { focus: { ...
vue中 $destroy 并且 removeChild 组件数据响失效
舜岳的博客
01-07 5944
this.$destroy() 作用: 完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。触发 beforeDestroy 和destroyed 的钩子。 当销毁一个组件时我们有可能会用这种方法： this.$destroy() this.$el.parentNode.removeChild(this.$el) //通过父级元素销毁当前组件 查看页面html该组件确实被销毁， 但是removeChild销毁组件只是表面上的销毁了该组件， 实际上该组件函数任然缓存在vue中，下次组件显
使用for进行removeChild的注意问题
努力，追梦的博客
04-06 728
通过JavaScript可以删除所有节点，本文里主要讨论 removeChild 函数，大家可以看看下面的示例 假设div里有这么些内容：  iScroll demo: simple function deleteData(){ } body,ul,li { padding:0; margin:0; border:0; } body { font-
html中添加删除元素之removeChild
小寒风的
06-16 670
页面html <div class="layui-input-block" id="collect"></div> 添加元素 点击查询从后端得到数据 ，数据可以保证每次只会返回一条 var searchList = []; //收件人列表 ******************************************* searchList.push(res.msg) var html = ''; html +=
html5 remove,html5中JavaScript removeChild 删除所有节点
weixin_28908857的博客
06-24 275
假设div里有这么些内容：复制代码代码如下:iScroll demo: simplefunction deleteData(){}body,ul,li {padding:0;margin:0;border:0;}body {font-size:12px;-webkit-user-select:none;-webkit-text-size-adjust:none;font-family:helvet...
(转载)Javascript removeChild()不能删除全部子节点的解决办法
weixin_30394633的博客
07-16 755
在Javascript中，只提供了一种删除节点的方法：removeChild()。removeChild() 方法用来删除父节点的一个子节点。 语法： parent.removeChild(thisNode) 参数说明： 参数说明 thisNode 当前节点，即要删除的节点 parent 当前节点的父节点，即 thisNode.parentNo...
DOM动态添加HTML节点 appendChild、removeChild
pan_junbiao的博客
07-07 1万+
1、函数语法 createElement(name)：方法可创建元素节点，此方法可返回一个 Element 对象。 appendChild(node)：方法在指定元素节点的最后一个子节点之后添加节点，该方法返回新的子节点。 removeChild(node)：方法可从子节点列表中删除某个节点。 elementNode.childNodes：属性返回包含被选节点的子节点的 NodeList。...
js之DOM操作（删除节点removeChild()）
热门推荐
web前端菜鸟工程师
09-21 2万+
删除节点removeChild() removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。 语法: nodeObject.removeChild(node) 参数: node ：必需，指定需要删除的节点。 注意: 把删除的子节点赋值给 x，这个子节点不在DOM树中，但是还存在内存中，可通过 x 操作。
JavaScript中深化理解DOM：节点模型与操作方法
- JavaScript提供了丰富的API，如`innerHTML`用于设置或获取元素的内容，`setAttribute()`用于设置属性值，`removeChild()`用于删除子节点等。 - DOM事件模型允许响应用户交互，比如点击、拖动等，通过监听`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值