removeChild() 方法从子节点列表中删除某个节点。如删除成功,此方法可返回被删除的节点,如失败,则返回 NULL。

语法:

nodeObject.removeChild(node)

参数:

node :必需,指定需要删除的节点。

我们来看看下面代码,删除子点。

运行结果:

HTML
删除节点的内容: javascript

注意: 把删除的子节点赋值给 x,这个子节点不在DOM树中,但是还存在内存中,可通过 x 操作。

如果要完全删除对象,给 x 赋 null 值,代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>

<body>
<div id="content">
  <h1>html</h1>
  <h1>php</h1>
  <h1>javascript</h1>
  <h1>jquery</h1>
  <h1>java</h1>
</div>

<script type="text/javascript">
//    方法一:当先把第一个子节点删除后,后面的子节点的索引就重新编号了:原来的第2个子节点会变成第1个子节点,第3个子节点会变成第2个子节点,但循环变量 i 是从 0、1、2... 顺序增长,所以会出现跳着删除的现象
    function clearText() {
        var content=document.getElementById("content");
        for(var i=0;i<content.childNodes.length;i++){
            var x=content.removeChild(content.childNodes[i]);
            x=null;
        }
    }
</script>

<script>
    //方法二:“i--”(如代码)的情况下是从最后一个子节点开始删除,并不会影响前面子节点的索引值,所以一次遍历完 i 后,即可全部删除子节点
    function clearText() {
        var content=document.getElementById("content");
        for(var i=content.childNodes.length-1;i>=0;i--){
            var childNode = content.childNodes[i];
            content.removeChild(childNode);
        }
    }    
</script>
<button οnclick="clearText()">清除节点内容</button>

</body>
</html>

删除节点removeChild()相关推荐

  1. php removechild,介绍删除节点函数removeChild()用法

    删除节点removeChild() removeChild() 方法从子节点列表中删除某个节点.如删除成功,此方法可返回被删除的节点,如失败,则返回 NULL. 语法: nodeObject.remo ...

  2. php移除所有子节点,Javascript removeChild()删除节点及删除子节点的方法_javascript技巧...

    下面给大家介绍Javascript removeChild()删除节点的方法,具体详情如下所示: 在Javascript中,只提供了一种删除节点的方法:removeChild(). removeChi ...

  3. mysql怎么删除函数节点_JS removeChild()方法:删除节点

    JavaScript removeChild() 方法可以从子节点列表中删除某个节点.用法如下: nodeObject.removeChild(node) 其中参数 node 为要删除节点.如果删除成 ...

  4. 节点操作-创建并添加删除节点替换克隆节点

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  5. 属性 元素的内容 创建,插入和删除节点 虚拟节点

    属性 html元素由一个标签和一组称为属性的名/值对组成. HTML 表示HTML文档元素的HTMLElement对象定义了读/写属性.映射了元素的HTML属性.HTMLElement定义了通用的HT ...

  6. JavaScript学习笔记:创建、添加与删除节点

    JavaScript学习笔记:创建.添加与删除节点 文章目录 JavaScript学习笔记:创建.添加与删除节点 一.DOM对象节点类型 二.创建节点 1.创建元素节点 2.创建文本节点 3.创建属性 ...

  7. IE 浏览器中不能使remove删除节点的解决方法

    在javascript操作dom树的时候可能会经常遇到增加,删除节点的事情,比如一个输入框后一个增加按钮,一个删除按钮,点击增加就增加 个输入框,点击删除就删除对应的输入框.在一些js框架,如Prot ...

  8. javascript 删除节点问题

    核心JS中没有直接删除节点的方法,但有一个操作DOM子节点的方法叫:removeChild(): 一: <script type="text/javascript">f ...

  9. 2、OpenSceneGraph中添加节点、删除节点、隐藏节点以及添加开关的用法

    1.添加节点之前要先声明一个组也就是根节点,就像是节点树一样必须要有一个根,然后在这个根下添加子节点,而子节点下还可以添加子节点,可通过osg::Group来创建一个根节点,如下代码所示: osg:: ...

最新文章

  1. 为什么阿里巴巴开发手册明确说明 Arrays.asList() 不能使用其修改方法
  2. dev 获取gridview没有rows属性_虚拟黑群晖不直通也可以获取到SMART?
  3. 21.使用委托表达回调
  4. Python 中关于 round 函数的小坑
  5. ASP.NET Core 3.x启动时运行异步任务(二)
  6. php+使用go编译,golang如何编译
  7. 一种使用SOC精确控制脉冲的方法
  8. 虚度大一一年又如何,双非本科大三学弟连斩腾讯字节
  9. 代码管理(二)sourcetree 安装与使用
  10. javascript 常用代码技巧大收集
  11. CrystalReports2007安装包
  12. 服务器无线网卡ap软件,无线网卡虚拟成无线AP工具(将无线网卡虚拟成无线AP软件) 2017最新版...
  13. tinymce上传图片php,在angular2中使用tinymce富文本编辑,并实现上传图片功能
  14. 计算字符串长度函数大全
  15. J. 青出于蓝胜于蓝(dfs序+树状数组)
  16. border-color属性设置单边边框和综合四边边框颜色
  17. 【原创】带下划线单选菜单栏-标签Tab
  18. 【导数术】12.极值点偏移与拐点偏移
  19. HDU 5294 Tricks Device(最短路+最大流)
  20. 根据ppt模板修改ppt内容

热门文章

  1. HTML 文字标签、段落标签、列表标签、链接标签和表格
  2. 2010 VOA常用新闻词汇
  3. 360大安全情报局:网友对摄像头的关注较去年提升201.5%
  4. ipynb文件转pdf,并支持中文
  5. 银行间业务——质押式回购、买断式回购、债券借贷
  6. CISCO路由器配置基础(2)
  7. 安装ug时提示java出错_为什么安装ug许可证会失败?快速解决ug安装许可证会失败问题...
  8. DOS批处理脚本语言简介与详细说明
  9. 电脑Win11安装Autocad出现错误要如何处理
  10. 101条财富哲理 转载