原生js删除元素
//删除id
var idObject = document.getElementById('sidebar');
if (idObject != null)
idObject.parentNode.removeChild(idObject);
//通过class获取元素
paras = document.getElementsByClassName('paginator');
for(i=0;i<paras.length;i++){
//删除元素 元素.parentNode.removeChild(元素);
if (paras[i] != null)
paras[i].parentNode.removeChild( paras[i]);
}
//清空一个元素,即删除一个元素的所有子元素
function removeAllChild() {
var div = document.getElementById("div1");
while(div.hasChildNodes()) //当div下还存在子节点时 循环继续
{
div.removeChild(div.firstChild);
}
}
原理很简单,就是不断的判断要清空的div还有没有子节点,有的话就删除一个子节点(这里是它的首个子节点),直到删除完毕为止。
//封装的方法
function removeElement(_element){
var
_parentElement = _element.parentNode;
if(_parentElement){
_parentElement.removeChild(_element);
}
}
原生js删除元素的更多相关文章
- 原生js获取元素的样式信息
工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...
- JavaScript DOM查询,原生js实现元素子节点的获取
在网页网页开发中,经常会需要获取某个网页元素的子元素,然后对其进行事件绑定.或样式修改等行为.这些操作对于jquery来说很容易,但是对于原生js会稍微麻烦一些,这里将介绍四种方法获取元素的子元素(本 ...
- 原生js获取元素样式
摘要: 我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之 ...
- 今天 学习用到的一些知识(properties 读取,js 删除元素)
1.properties文件位置的关系:当properties文件放在src目录下时,编译会自动把src里的文件放到bin文件平级,因此可用this.getClass.getClassLoader.g ...
- 原生JS获取元素宽高实践详解
开篇的话 任何不是亲身实践中求得的知识,都不是属于你的.任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排 ...
- 原生JS获取元素集合的子元素宽度
有些时候,在一个网页的ul li中,存在左右两个部分的内容,但是右边元素内容又是不固定,左边元素相对应的不能用固定宽度,所有需要我们动态的获取右边元素宽度,来赋值给左边元素的marginRight值. ...
- 原生JS查找元素
今天写了一个很简单.很粗暴的通过JS根据类来查找DOM元素. 为了降低它的粗暴等级(耗费性能)我给了三个等级. 首先性能最好的,适合FF,CH,IE8,通过querySelectorAll这个API. ...
- 原生js获取元素的子元素
//使用firstChild //但是下面这种因为有空格,也算其子元素 <lable> <span id="onlinePerson" name="pe ...
- 原生js实现元素类名的判存、添加和移除
1.addClass:为指定的dom元素添加样式. 2.removeClass:删除指定dom元素的样式. 3.toggleClass:如果存在(不存在),就删除(添加)一个样式. 4.hasClas ...
随机推荐
- 使用Asp.Net Core MVC 开发项目实践[第三篇:基于EF Core的扩展]
上篇我们说到了EFCore的基础使用,这篇我们将讲解下基于EFCore的扩展. 我们在Mango.Framework.EFCore类库项目中创建一个类名EFExtended的扩展类,并且引入相关的命名 ...
- Spark新手入门——3.Spark集群(standalone模式)安装
主要包括以下三部分,本文为第三部分: 一. Scala环境准备 查看二. Hadoop集群(伪分布模式)安装 查看三. Spark集群(standalone模式)安装 Spark集群(standalo ...
- PHP语言的优缺点
PHP是一种跨平台的服务器端的嵌入式脚本语言. 优点: 实用性强 它大量地借用C.Java 平台广 支持数据种类多 有成熟框架 ,面向对象体系 PHP是完全免费 开源 缺点: 语法不严谨, 弱类型语言 ...
- SpringBoot入门之基于注解的Mybatis
今天学习下SpringBoot集成mybatis,集成mybatis一般有两种方式,一个是基于注解的一个是基于xml配置的.今天先了解下基于注解的mybatis集成. 一.引入依赖项 因为是mybat ...
- (转)分享一个技巧,利用批处理调用ruby脚本(可能你为路径苦恼)
#关闭命令显示 @echo off #提示信息 echo Now,listing the controller,please not shutdown the DOS File! #切换到当前路径,. ...
- 钉钉接口:获取accessToken和打卡记录【分享】
post和get方法工具类:HttpUtils package weaver.dingtalk.utils; import com.alibaba.fastjson.JSONObject; impor ...
- (2)Microsoft office Word 2013版本操作入门_快速选中
1.快速选中一行 .一段文字: 1.1光标在一行内,双击会选中一个词组.快速点击三下会选中一段, 1.2 鼠标移动到行首,单击击会选中一行,双击选中一段. 1.3 选择全部内容 Ctrl+A , 1 ...
- Tests for Variances
In each case, we'll illustrate how to perform the hypothesis tests of this lesson using summarized d ...
- jQuery动画切换引擎插件Velocity.js
Velocity.js 官网 Velocity.js实现弹出式相框 慕课网 极棒的jquery动画切换引擎插件Velocity.js jQ库 (function($){ // 普通调用 /*$('#d ...
- 初学CSS-1-CSS的格式
style标签:必须写在head标签中. <head> <style type="text/css"> 标签名称{ 属性名称:属性对应的值: } </ ...