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

 

相关文章
|
3月前
|
JavaScript 前端开发
JavaScript 添加和删除元素
JavaScript 添加和删除元素
|
2月前
|
移动开发 前端开发 JavaScript
原生JavaScript+canvas实现五子棋游戏_值得一看
本文介绍了如何使用原生JavaScript和HTML5的Canvas API实现五子棋游戏,包括棋盘的绘制、棋子的生成和落子、以及判断胜负的逻辑,提供了详细的代码和注释。
30 0
原生JavaScript+canvas实现五子棋游戏_值得一看
|
1月前
|
JavaScript 前端开发 安全
JavaScript 添加和删除元素
JavaScript 添加和删除元素
11 0
|
2月前
|
JavaScript 前端开发
JavaScript遍历数组用splice方法删除元素,这样写可能有遗漏,你遇到过吗?
JavaScript遍历数组用splice方法删除元素,这样写可能有遗漏,你遇到过吗?
|
3月前
|
Devops 持续交付 测试技术
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
38 0
|
3月前
|
JavaScript 前端开发 API
从零开始学表单操作,jQuery 与原生 JavaScript 完全指南,带你轻松掌握网页交互关键!
【8月更文挑战第31天】在网页开发中,表单是实现用户互动的关键元素。无论是收集信息、提交数据还是验证输入,都需要对表单进行有效操作。本文档介绍了如何使用原生 JavaScript 和 jQuery 操作表单,包括获取表单元素、读写表单值、处理表单提交及验证等核心功能。jQuery 提供了更简洁的语法和更好的兼容性,但原生 JavaScript 在性能上有优势。选择合适的方法取决于项目需求和个人偏好。下面通过具体示例展示了两种方式的操作方法。
31 0
|
5月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
5月前
|
JavaScript
原生JS实现全选、全不选
原生JS实现全选、全不选
|
4月前
|
JavaScript
js 一键复制到剪贴板(原生js实现)
js 一键复制到剪贴板(原生js实现)
31 0
|
5月前
|
前端开发 JavaScript 容器
程序技术好文:纯原生javascript下拉框表单美化实例教程
程序技术好文:纯原生javascript下拉框表单美化实例教程
79 0