Js如何删除所有子元素以及当前元素
示例展示
具体描述
在原生js
当中,html
的内容元素总是以嵌套的关系存在于网页中,因此,可以通过遍历树的方法访问网页里的每一个元素,当然也是可以删除指定的子元素的
原生js代码
// 删除元素的函数
function deleteChilds() {var ul = document.getElementsByTagName("ul")[0]; // 获取父级DOM// 判断是否包含子元素if(ul.hasChildNodes()) {var len = ul.childNodes.length; // 子元素的个数for(var i = 0;i<len;i++) { // 遍历ul.removeChild(ul.childNodes[0]); // 从第一个元素开始删除}}
}
如下是html
代码
<ul><li>coder.itclan.cn</li><li>itclan.cn</li><li>aikelaidev.cn</li><li>pay.aikelaidev.cn</li>
</ul>
删除父级元素的所有节点,我们常规性的思维,很容易写这样的代码,如下的代码是无法删除干净的
function deleteChilds() {var ul = document.getElementsByTagName("ul")[0]; // 获取父级DOMvar len = ul.childNodes.length; // 子元素的个数for(var i = 0;i<len;i++) { // 遍历console.log(ul.childNodes[i].nodeName)ul.removeChild(ul.childNodes[i]); // 从第一个元素开始删除}
}
当你把索引为0的子节点删除后那么很自然的原来索引为1节点此时它的索引变成0了,而这时变量i已经变成1了,程序继续走时就会删除原先索引为2的现在为1的节点,这样程序运行的结果就是只删除了一半的子节点
在遍历时因为删除了子节点,ul.childNodes.length
值已经减小,影响了遍历结果
我们应该从后面往前删除
function deleteChilds() {var ul = document.getElementsByTagName("ul")[0]; // 获取父级DOMvar len = ul.childNodes.length; // 子元素的个数for(var i = len-1;i>=0;i--) { // 从后往前ul.removeChild(ul.childNodes[i]); // 从第一个元素开始删除}
}
Vue版本实现
如下是上面展示示例的代码
<template><div class="wrap"><div><ul id="ul"><li v-for="(item,index) in lists" :key="index"><span>{{item}}</span><el-button type="danger" @click="handleDelteItem(index)" size="mini">删除</el-button></li></ul> </div><div class="deletAllBtn"><el-button type="primary" @click="handleDelete">删除所有元素</el-button></div> </div>
</template><script>export default {name: 'deleteChildELem',data() {return {lists: ["coder.itclan.cn",'itclan.cn','tv.itclan.cn','short.itclan.cn','aikelaidev.cn']}},methods: {handleDelete() {// this.lists = []; // 如果是使用Vue编程思维,删除所有子元素,直接操作数组为空,就删除所有子元素了的// 这里用原生js实现,主要是演示操作子节点的方式,在vue项目里,操作DOM的话,那使用vue就没有任何意义价值了的var ul = document.getElementById('ul');// 获取父级元素的DOM// 判断是否包含子元素if(ul.hasChildNodes()) {var len = ul.childNodes.length; // 子元素的个数for(var i = 0;i<len;i++) {ul.removeChild(ul.childNodes[0]); // 从第一个元素开始删除}}// 也可以等价如下这样,逆向删除节点/**** for(var i = ul.childNodes.length-1;i>=0;i--) {ul.removeChild(ul.childNodes[i])}* */},handleDelteItem(index) {// 如果是使用vue的话,那么直接操作数组的方法就可以了的,一行代码就可以可以解决this.lists.splice(index,1);}}}
</script><style lang="scss" scoped>
.wrap {text-align:center;
}span{display:inline-block;width: 200px;
}ul>li {margin-bottom: 5px;border-bottom: 1px dashed #ccc;
}.deletAllBtn {margin-top: 20px;
}
</style>
删除数组的所有子元素,在Vue当中直接清空数组就可以了也就是this.lists = []
就可以,而删除当前元素则使用this.lists.splice(index,1)
;,splice
方法就可以
总结
在操作一些列表,新增和删除,或全部删除清空,是一个比较常见的操作,使用原生Js
全部删除操作是,通过循环遍历,一个一个的删除,而在框架里,是操作数组,想要删除全部,清空数组数据就可以了的
JS如何为表单聚焦控件设置醒目的样式
2023-01-31
Js如何实现当网页超过一屏时导航菜单始终置顶-吸顶盒效果
2023-01-30
VueJs中如何使用Teleport组件
2023-01-22
VueJs中如何使用provide与inject
2023-01-21
点击左下角查看更多
Js如何删除所有子元素以及当前元素相关推荐
- Javascript中删除数组中重复出现的元素
今天在做到蓝桥云课中用js进行删除数组中重复出现的元素,自己进行了一点总结: 这里的删除相同元素与c++思想上不同. 在c++中我是通过先按大小排序后,再进行比对然后后往前赋值类似于整体移动前一位,长 ...
- js删除数组中的某一个元素
删除数组中的某一个元素,这里写一个普通的办法 首先可以给JS的数组对象定义一个函数,用于查找指定的元素在数组中的位置,即索引,代码为: Array.prototype.indexOf = functi ...
- js list删除指定元素_删除js数组中的指定元素,有这两步就够了
js数组是js部分非常重要的知识,有时我们有这么个需求js数组删除指定元素,先定义一个函数来获取删除指定元素索引值,然后用js数组删除的方法,来删除指定元素即可,就两步不难,很简单. 1.JS的数组对 ...
- js删除两个集合中共同元素_多个集合中的共同和独特元素
js删除两个集合中共同元素 本周,我们将暂时中断较高级别的问题和技术文章,以解决我们中许多人可能面临的一些代码问题. 没什么花哨的或太辛苦的,但是有一天它可能会节省您15分钟的时间,偶尔回到基础上也很 ...
- vue 删除两个集合中相同的数据_vue.js如何删除数组里面的数据
vue.js如何删除数组里面的数据 发布时间:2020-12-10 12:04:44 来源:亿速云 阅读:107 作者:小新 这篇文章主要介绍了vue.js如何删除数组里面的数据,具有一定借鉴价值,需 ...
- js实现删除确认提示框
js实现删除确认提示框 一.实例描述 防止用户小心单击了"删除"按钮,在用户单击"删除"按钮后,给出一个提示,让用户确认此次操作是否正确. 二.效果 三.代码 ...
- js delete删除对象属性,delete删除不了变量及原型链中的变量
js delete删除对象属性,delete删除不了变量及原型链中的变量 一.delete删除对象属性 function fun(){this.name = 'gg';}var obj = new f ...
- [码海拾贝 之JS] JS 之删除数组中的元素
前言 在Java 中要从一个list 中删除一个元素, 直接使用 remove 方法就可以了. 在js 中的array 并没有 remove 方法, 但是在js 中array 有splice 方法可以 ...
- JS删除两个数组有相同元素或者相同属性
JS删除两个数组有相同元素或者相同属性: var newArray=array1.filter(function(item) {return array2.indexOf(item) == -1 }) ...
最新文章
- springMVC入门配置及helloworld实例
- 未来:万物皆互联、全民皆社交,人人都是马化腾
- Tomcat源码解析四:Tomcat关闭过程
- C语言进阶——全局变量
- 基于MFC框架下OpenGL的exe可移植
- perl 正则表达式 引擎_Perl 5引擎概述
- Mac查看Python安装路径和版本
- 读取图像中任意点的像素值
- 电子元器件的识别与换算
- 神州数码云平台网络环境
- C语言链表创建的电子通讯录V1.0
- 西宾知乎语音下载工具(zhihudownload)
- web服务器攻击与防御系统设计,网络安全-Web的入侵防御系统的设计与实现
- 二维特征分类的基础_用特征提取技术降低数据集维度,你学会了吗?
- 解决: 在路径为[/StudentManagerWeb]的上下文中,servlet[LoginServlet]的Servlet.service()引发异常 java.lang.NullPointe
- 网页认证上网服务器无响应,portal认证失败,网络故障或者portal服务器没有响应排查方法...
- 员工被提拔,还是被干掉,就看这3点......
- 第六次作业--结队编程第二次
- 跟着BOY学习--史上最通俗易懂的连连看算法--cocos2d-x 环境下开发
- linux sh语法进入目录,Linux_常用的Linux shell命令详解收集整理,1 文件与目录操作命令 
1.1文 - phpStudy...