//删除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删除元素的更多相关文章

  1. 原生js获取元素的样式信息

    工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...

  2. JavaScript DOM查询,原生js实现元素子节点的获取

    在网页网页开发中,经常会需要获取某个网页元素的子元素,然后对其进行事件绑定.或样式修改等行为.这些操作对于jquery来说很容易,但是对于原生js会稍微麻烦一些,这里将介绍四种方法获取元素的子元素(本 ...

  3. 原生js获取元素样式

    摘要: 我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之 ...

  4. 今天 学习用到的一些知识(properties 读取,js 删除元素)

    1.properties文件位置的关系:当properties文件放在src目录下时,编译会自动把src里的文件放到bin文件平级,因此可用this.getClass.getClassLoader.g ...

  5. 原生JS获取元素宽高实践详解

    开篇的话 任何不是亲身实践中求得的知识,都不是属于你的.任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排 ...

  6. 原生JS获取元素集合的子元素宽度

    有些时候,在一个网页的ul li中,存在左右两个部分的内容,但是右边元素内容又是不固定,左边元素相对应的不能用固定宽度,所有需要我们动态的获取右边元素宽度,来赋值给左边元素的marginRight值. ...

  7. 原生JS查找元素

    今天写了一个很简单.很粗暴的通过JS根据类来查找DOM元素. 为了降低它的粗暴等级(耗费性能)我给了三个等级. 首先性能最好的,适合FF,CH,IE8,通过querySelectorAll这个API. ...

  8. 原生js获取元素的子元素

    //使用firstChild //但是下面这种因为有空格,也算其子元素 <lable> <span id="onlinePerson" name="pe ...

  9. 原生js实现元素类名的判存、添加和移除

    1.addClass:为指定的dom元素添加样式. 2.removeClass:删除指定dom元素的样式. 3.toggleClass:如果存在(不存在),就删除(添加)一个样式. 4.hasClas ...

随机推荐

  1. 使用Asp.Net Core MVC 开发项目实践[第三篇:基于EF Core的扩展]

    上篇我们说到了EFCore的基础使用,这篇我们将讲解下基于EFCore的扩展. 我们在Mango.Framework.EFCore类库项目中创建一个类名EFExtended的扩展类,并且引入相关的命名 ...

  2. Spark新手入门——3.Spark集群(standalone模式)安装

    主要包括以下三部分,本文为第三部分: 一. Scala环境准备 查看二. Hadoop集群(伪分布模式)安装 查看三. Spark集群(standalone模式)安装 Spark集群(standalo ...

  3. PHP语言的优缺点

    PHP是一种跨平台的服务器端的嵌入式脚本语言. 优点: 实用性强 它大量地借用C.Java 平台广 支持数据种类多 有成熟框架 ,面向对象体系 PHP是完全免费 开源 缺点: 语法不严谨, 弱类型语言 ...

  4. SpringBoot入门之基于注解的Mybatis

    今天学习下SpringBoot集成mybatis,集成mybatis一般有两种方式,一个是基于注解的一个是基于xml配置的.今天先了解下基于注解的mybatis集成. 一.引入依赖项 因为是mybat ...

  5. (转)分享一个技巧,利用批处理调用ruby脚本(可能你为路径苦恼)

    #关闭命令显示 @echo off #提示信息 echo Now,listing the controller,please not shutdown the DOS File! #切换到当前路径,. ...

  6. 钉钉接口:获取accessToken和打卡记录【分享】

    post和get方法工具类:HttpUtils package weaver.dingtalk.utils; import com.alibaba.fastjson.JSONObject; impor ...

  7. (2)Microsoft office Word 2013版本操作入门_快速选中

    1.快速选中一行 .一段文字: 1.1光标在一行内,双击会选中一个词组.快速点击三下会选中一段, 1.2 鼠标移动到行首,单击击会选中一行,双击选中一段. 1.3 选择全部内容 Ctrl+A  , 1 ...

  8. Tests for Variances

    In each case, we'll illustrate how to perform the hypothesis tests of this lesson using summarized d ...

  9. jQuery动画切换引擎插件Velocity.js

    Velocity.js 官网 Velocity.js实现弹出式相框 慕课网 极棒的jquery动画切换引擎插件Velocity.js jQ库 (function($){ // 普通调用 /*$('#d ...

  10. 初学CSS-1-CSS的格式

    style标签:必须写在head标签中. <head> <style type="text/css"> 标签名称{ 属性名称:属性对应的值: } </ ...