# Js如何删除所有子元素以及当前元素
# 快速导航
# 示例展示
- coder.itclan.cn
- itclan.cn
- tv.itclan.cn
- short.itclan.cn
- aikelaidev.cn
# 具体描述
在原生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]); // 从第一个元素开始删除
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
如下是html代码
<ul>
<li>coder.itclan.cn</li>
<li>itclan.cn</li>
<li>aikelaidev.cn</li>
<li>pay.aikelaidev.cn</li>
</ul>
1
2
3
4
5
6
2
3
4
5
6
删除父级元素的所有节点,我们常规性的思维,很容易写这样的代码,如下的代码是无法删除干净的
function deleteChilds() {
var ul = document.getElementsByTagName("ul")[0]; // 获取父级DOM
var len = ul.childNodes.length; // 子元素的个数
for(var i = 0;i<len;i++) { // 遍历
console.log(ul.childNodes[i].nodeName)
ul.removeChild(ul.childNodes[i]); // 从第一个元素开始删除
}
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
当你把索引为0的子节点删除后那么很自然的原来索引为1节点此时它的索引变成0了，而这时变量i已经变成1了，程序继续走时就会删除原先索引为２的现在为1的节点，这样程序运行的结果就是只删除了一半的子节点
在遍历时因为删除了子节点，ul.childNodes.length值已经减小，影响了遍历结果
我们应该从后面往前删除
function deleteChilds() {
var ul = document.getElementsByTagName("ul")[0]; // 获取父级DOM
var len = ul.childNodes.length; // 子元素的个数
for(var i = len-1;i>=0;i--) { // 从后往前
ul.removeChild(ul.childNodes[i]); // 从第一个元素开始删除
}
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
删除数组的所有子元素,在Vue当中直接清空数组就可以了也就是this.lists = []就可以,而删除当前元素则使用this.lists.splice(index,1);,splice方法就可以
分享
留言
解答
收藏
