原生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);
         }
}

 

相关文章
|
18天前
|
JSON JavaScript 前端开发
JavaScript原生代码处理JSON的一些高频次方法合集
JavaScript原生代码处理JSON的一些高频次方法合集
|
2月前
|
JavaScript
原生js实现复选框(全选/全不选/反选)效果【含完整代码】
原生js实现复选框(全选/全不选/反选)效果【含完整代码】
58 1
|
18天前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
|
3月前
|
前端开发 JavaScript 索引
|
1天前
|
JavaScript 前端开发 BI
原生html—摆脱ps、excel 在线绘制财务表格加水印(html绘制表格js加水印)
原生html—摆脱ps、excel 在线绘制财务表格加水印(html绘制表格js加水印)
6 1
|
4天前
|
JavaScript 前端开发 UED
深入解析JavaScript原生操作DOM技术
【4月更文挑战第22天】本文深入探讨JavaScript原生DOM操作技术,包括使用`getElement*`方法和CSS选择器获取元素,借助`createElement`与`appendChild`动态创建及插入元素,修改元素内容、属性和样式,以及删除元素。通过掌握这些技术,开发者能实现页面动态交互,但应注意避免过度操作DOM以优化性能和用户体验。
|
18天前
|
JavaScript
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
|
3月前
|
JavaScript 前端开发
jsjs原生 JavaScript轮播图 渐变淡入淡出
jsjs原生 JavaScript轮播图 渐变淡入淡出
|
3月前
|
前端开发 JavaScript 安全
JavaScript 中的宿主对象和原生对象:开发者必知的基础知识(下)
JavaScript 中的宿主对象和原生对象:开发者必知的基础知识(下)
JavaScript 中的宿主对象和原生对象:开发者必知的基础知识(下)
|
3月前
|
XML 存储 JavaScript
JavaScript 中的宿主对象和原生对象:开发者必知的基础知识(上)
JavaScript 中的宿主对象和原生对象:开发者必知的基础知识(上)
JavaScript 中的宿主对象和原生对象:开发者必知的基础知识(上)