原生js删除元素

简介: //删除id     var idObject = document.getElementById('sidebar');    if (idObject != null)          idObject.

//删除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);
         }
}

 

相关文章
|
1月前
|
JavaScript 算法 数据安全/隐私保护
原生JS实现:密码输入框显示隐藏密码效果
原生JS实现:密码输入框显示隐藏密码效果
|
1月前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
|
13天前
|
JavaScript 开发者 前端开发
浅谈Vue.js与原生开发
Vue.js 是一款流行的前端框架,以其独特的模板语法简化了动态视图创建,通过指令和表达式便捷处理数据。与原生开发相比,Vue.js 提供了Vue Router进行高效路由管理,Vuex进行状态集中管理,以及丰富的生态系统和工具链如Vue CLI。Vue组件化开发、响应式数据绑定和单文件组件提高了代码复用和可维护性,但原生开发在性能和直接操作DOM方面可能更具优势。
|
29天前
|
前端开发 JavaScript
前端 js 经典:Object 常用原生方法
前端 js 经典:Object 常用原生方法
53 2
|
29天前
|
前端开发 JavaScript
前端 js 经典:array 原生方法
前端 js 经典:array 原生方法
22 1
|
29天前
|
JavaScript 索引
jQuery 实现 图片框切换【与原生 JS 对比】
jQuery 实现 图片框切换【与原生 JS 对比】
|
30天前
|
监控 JavaScript 前端开发
超越原生:探索Node.js中最佳文件系统三方库
超越原生:探索Node.js中最佳文件系统三方库
|
1月前
|
JavaScript 前端开发 索引
JavaScript array 原生 reduce 方法的模拟实现
JavaScript array 原生 reduce 方法的模拟实现
26 2
|
1月前
|
JavaScript 计算机视觉
原生js通过年龄判断是否可以抽奖
原生js通过年龄判断是否可以抽奖
17 0
|
1月前
|
存储 JavaScript 前端开发
原生JS如何实现验证码
原生JS如何实现验证码
24 0