示例展示
具体描述
在原生js当中,html的内容元素总是以嵌套的关系存在于网页中,因此,可以通过遍历树的方法访问网页里的每一个元素,当然也是可以删除指定的子元素的
原生js代码
//删除元素的函数functiondeleteChilds(){varul=document.getElementsByTagName("ul")[0];//获取父级DOM//判断是否包含子元素if(ul.hasChildNodes()){varlen=ul.childNodes.length;//子元素的个数for(vari=0;i<len;i++){//遍历ul.removeChild(ul.childNodes[0]);//从第一个元素开始删除}}}
如下是html代码
<ul><li></li><li></li><li></li><li></li></ul>
删除父级元素的所有节点,我们常规性的思维,很容易写这样的代码,如下的代码是无法删除干净的
functiondeleteChilds(){varul=document.getElementsByTagName("ul")[0];//获取父级DOMvarlen=ul.childNodes.length;//子元素的个数for(vari=0;i<len;i++){//遍历console.log(ul.childNodes[i].nodeName)ul.removeChild(ul.childNodes[i]);//从第一个元素开始删除}}
当你把索引为0的子节点删除后那么很自然的原来索引为1节点此时它的索引变成0了，而这时变量i已经变成1了，程序继续走时就会删除原先索引为２的现在为1的节点，这样程序运行的结果就是只删除了一半的子节点
在遍历时因为删除了子节点，ul.childNodes.length值已经减小，影响了遍历结果
我们应该从后面往前删除
functiondeleteChilds(){varul=document.getElementsByTagName("ul")[0];//获取父级DOMvarlen=ul.childNodes.length;//子元素的个数for(vari=len-1;i>=0;i--){//从后往前ul.removeChild(ul.childNodes[i]);//从第一个元素开始删除}}
Vue版本实现
如下是上面展示示例的代码
<template><divclass="wrap"><div><ulid="ul"><liv-for="(item,index)inlists":key="index"><span>{{item}}</span><el-buttontype="danger"@click="handleDelteItem(index)"size="mini">删除</el-button></li></ul></div><divclass="deletAllBtn"><el-buttontype="primary"@click="handleDelete">删除所有元素</el-button></div></div></template><script>exportdefault{name:'deleteChildELem',data(){return{lists:["",'','','','']}},methods:{handleDelete(){//this.lists=[];//如果是使用Vue编程思维,删除所有子元素,直接操作数组为空,就删除所有子元素了的//这里用原生js实现,主要是演示操作子节点的方式,在vue项目里,操作DOM的话,那使用vue就没有任何意义价值了的varul=document.getElementById('ul');//获取父级元素的DOM//判断是否包含子元素if(ul.hasChildNodes()){varlen=ul.childNodes.length;//子元素的个数for(vari=0;i<len;i++){ul.removeChild(ul.childNodes[0]);//从第一个元素开始删除}}//也可以等价如下这样,逆向删除节点/****for(vari=ul.childNodes.length-1;i>=0;i--){ul.removeChild(ul.childNodes[i])}**/},handleDelteItem(index){//如果是使用vue的话,那么直接操作数组的方法就可以了的,一行代码就可以可以解决this.lists.splice(index,1);}}}</script><stylelang="scss"scoped>.wrap{text-align:center;}span{display:inline-block;width:200px;}ul>li{margin-bottom:5px;border-bottom:1pxdashed#ccc;}.deletAllBtn{margin-top:20px;}</style>
删除数组的所有子元素,在Vue当中直接清空数组就可以了也就是this.lists = []就可以,而删除当前元素则使用this.lists.splice(index,1);,splice方法就可以
总结
在操作一些列表,新增和删除,或全部删除清空,是一个比较常见的操作,使用原生Js全部删除操作是,通过循环遍历,一个一个的删除,而在框架里,是操作数组,想要删除全部,清空数组数据就可以了的
JS如何为表单聚焦控件设置醒目的样式
-01-31
Js如何实现当网页超过一屏时导航菜单始终置顶-吸顶盒效果
-01-30
VueJs中如何使用Teleport组件
-01-22
VueJs中如何使用provide与inject
-01-21
点击左下角查看更多
如果觉得《Js如何删除所有子元素以及当前元素》对你有帮助，请点赞、收藏，并留下你的观点哦！
