JavaScript的removeChild()函数用法详解

removechild 函数可以删除父元素的指定子元素。

如果此函数删除子节点成功，则返回被删除的节点，否则返回null。

语法结构:

fatherObj.removeChild(childrenObj)

参数解释:

1.fatherObj:要删除子元素的元素对象。
2.childrenObj:要被删除的子元素对象。

特别说明:

在火狐、谷歌和IE8以上浏览器中，空白也算是一个文本节点，但是在IE8和IE8以下浏览器中会忽略空白文本节点，具体可以参阅javascript如何获取元素的子节点和父节点 一章节。

代码实例:

实例一:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>我们</title>
<script type="text/javascript">
window.onload=function(){
 var obox=document.getElementById("box");
 var lis=obox.getElementsByTagName("li");
 obox.removeChild(lis[1]);
}
</script>
</head>
<body>
<ul id="box">
 <li>我们一</li>
 <li>我们二</li>
 <li>我们三</li>
 <li>我们四</li>
</ul>
</body>
</html>

以上代码可以删除box的子元素中的第二个li元素。

实例二:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>我们</title>
<script type="text/javascript">
window.onload=function(){
 var obox=document.getElementById("box");
 var liArray=[];
 var y=0;
 var childNodes=obox.childNodes;
 for(var i=0;i<childNodes.length;i++){
  if(childNodes[i].nodeType==1){
   liArray[y]=childNodes[i];
   y=y+1;
  }
 }
 obox.removeChild(liArray[1]);
}
</script>
</head>
<body>
<ul id="box">
 <li>我们一</li>
 <li>我们二</li>
 <li>我们三</li>
 <li>我们四</li>
</ul>
</body>
</html>

以上代码可以从box中所有子节点中选取元素节点，然后将元素节点放入数组，然后再删除第二个元素节点。

总结：

removeChild()

这个函数是得到元素的父元素，进行删除的。语法形式为：parent.removeChild(child);

有时候我们希望在不涉及父元素的情况下进行删除。但是DOM 就是这个机制，必须明确元素和父元素才能进行删除。在进的到要删除的元素时，我们也是可以进行删除操作的，利用其 parentNode 属性来找到父元素：

var child=document.getElementById(p1);
child.parentNode.removeChild(child);

注意：jquery也有功能与removeChild相对应的函数：remove（）和empty（）

remove（）：是指将自己本身和子元素均删除

empty（）：是删除子元素

赞 (0)

相关推荐

  • Javascript removeChild()删除节点及删除子节点的方法

    Javascript removeChild()删除节点及删除子节点的方法

    下面给大家介绍Javascript removeChild()删除节点的方法,具体详情如下所示: 在Javascript中,只提供了一种删除节点的方法:removeChild(). removeChild() 方法用来删除父节点的一个子节点. 语法: parent.removeChild(thisNode) 参数说明: 参数 说明 thisNode 当前节点,即要删除的节点 parent 当前节点的父节点,即 thisNode.parentNode 例如,删除 id="demo" 的节

  • 手机端页面rem宽度自适应脚本

    什么是rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对大小就可以实现自适应了,就不用什么媒体查询那些的. 我们的设计图往往宽度是640或者其他尺寸的,不过我建议是用这个尺寸,以640为基准,以小到大,实现自适应,下面实现的比例为1rem=40px(640宽度). 为什么这样搞? 这样一套代码就搞定手机端尺寸自适应,不需要媒体查询,而且利用Sass和Less能够给我们节约更多的时间,以及

  • Js动态设置rem来实现移动端字体的自适应代码

    下面一段代码给大家介绍了Js动态设置rem来实现移动端字体的自适应,以此做个记录,方便以后需要,感兴趣的朋友一起看看吧. 具体代码如下所示: //设置根元素字体 var win = window, doc = document; function setFontSize() { var winWidth = $(window).width(); //750这个数字是根据你的设计图的实际大小来的,所以值具体根据设计图的大小 var size = (winWidth / 750) * 100; do

  • JS动态计算移动端rem的解决方案

    在做移动端web app的时候,众所周知,移动设备分辨率五花八门,虽然我们可以通过CSS3的media query来实现适配,例如下面这样: html { font-size : 20px; } @media only screen and (min-width: 401px){ html { font-size: 25px !important; } } @media only screen and (min-width: 428px){ html { font-size: 26.75px !

  • JavaScript的removeChild()函数用法详解

    removechild 函数可以删除父元素的指定子元素. 如果此函数删除子节点成功,则返回被删除的节点,否则返回null. 语法结构: fatherObj.removeChild(childrenObj) 参数解释: 1.fatherObj:要删除子元素的元素对象. 2.childrenObj:要被删除的子元素对象. 特别说明: 在火狐.谷歌和IE8以上浏览器中,空白也算是一个文本节点,但是在IE8和IE8以下浏览器中会忽略空白文本节点,具体可以参阅javascript如何获取元素的子节点和父节

  • JavaScript中eval()函数用法详解

    eval() 函数计算 JavaScript 字符串,并把它作为脚本代码来执行. 如果参数是一个表达式,eval() 函数将执行表达式.如果参数是Javascript语句,eval()将执行 Javascript 语句. 语法 复制代码 代码如下: eval(string) 参数 描述 string 必需.要计算的字符串,其中含有要计算的 JavaScript 表达式或要执行的语句. eval()函数用法详解: 此函数可能使用的频率并不是太高,但是在某些情况下具有很大的作用,下面就介绍一下eva

  • python中的Json模块dumps、dump、loads、load函数用法详解

    目录 json的作用 python中的Json模块dumps.dump.loads.load函数用法详解 1.json.dumps()和loads() 2.json.dump()和json.load() 3.如何读取写入多行数据呢? json的作用 JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式 json.dumps(): 对数据进行编码,把python对象转换为字符串数据json.loads(): 对数据进行解码,把json的字符串转换为pyth

  • Python的Lambda函数用法详解

    在Python中有两种函数,一种是def定义的函数,另一种是lambda函数,也就是大家常说的匿名函数.今天我就和大家聊聊lambda函数,在Python编程中,大家习惯将其称为表达式. 1.为什么要用lambda函数? 先举一个例子:将一个列表里的每个元素都平方. 先用def来定义函数,代码如下 def sq(x): return x*x map(sq,[y for y in range(10)]) 再用lambda函数来编写代码 map(lambda x: x*x,[y for y in r

  • Python中flatten( )函数及函数用法详解

    flatten()函数用法 flatten是numpy.ndarray.flatten的一个函数,即返回一个一维数组. flatten只能适用于numpy对象,即array或者mat,普通的list列表不适用!. a.flatten():a是个数组,a.flatten()就是把a降到一维,默认是按行的方向降 . a.flatten().A:a是个矩阵,降维后还是个矩阵,矩阵.A(等效于矩阵.getA())变成了数组.具体看下面的例子: 1.用于array(数组)对象 >>> from n

  • pytorch中torch.max和Tensor.view函数用法详解

    torch.max() 1. torch.max()简单来说是返回一个tensor中的最大值. 例如: >>> si=torch.randn(4,5) >>> print(si) tensor([[ 1.1659, -1.5195, 0.0455, 1.7610, -0.2064], [-0.3443, 2.0483, 0.6303, 0.9475, 0.4364], [-1.5268, -1.0833, 1.6847, 0.0145, -0.2088], [-0.86

  • python isinstance函数用法详解

    这篇文章主要介绍了python isinstance函数用法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 isinstance() 函数来判断一个对象是否是一个已知的类型类似 type(). isinstance() 与 type() 区别: type() 不会认为子类是一种父类类型,不考虑继承关系. isinstance() 会认为子类是一种父类类型,考虑继承关系. 如果要判断两个类型是否相同推荐使用 isinstance(). 语法

  • C++ min/max_element 函数用法详解

    同样是O(n)复杂度,但是经过不严谨 测试,使用库函数的速度远超for循环的遍历找最值 /* param begin : 序列起始地址(迭代器) param end : 序列结束地址(迭代器) return : 序列中最小元素地址(迭代器) */ min_element(begin, end); /* param begin : 序列起始地址(迭代器) param end : 序列结束地址(迭代器) return : 序列中最大元素地址(迭代器) */ max_element(begin, en

  • python yield和Generator函数用法详解

    这篇文章主要介绍了python yield和Generator函数用法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 首先我们从一个小程序导入,各定一个list,找出其中的素数,我们会这样写 import math def is_Prims(number): if number == 2: return True //除2以外的所有偶数都不是素数 elif number % 2 == 0: return False //如果一个数能被除1和

  • pandas dataframe 中的explode函数用法详解

    在使用 pandas 进行数据分析的过程中,我们常常会遇到将一行数据展开成多行的需求,多么希望能有一个类似于 hive sql 中的 explode 函数. 这个函数如下: Code # !/usr/bin/env python # -*- coding:utf-8 -*- # create on 18/4/13 import pandas as pd def dataframe_explode(dataframe, fieldname): temp_fieldname = fieldname

随机推荐