对元素循环遍历的理解

需求：实现简易的发表评论工具。

---

初次尝试

思路：点击发表按钮后得到评论框的数据，然后进行动态 li 元素创建，插入内容和删除按钮，再整体插入 ul 元素。点击删除元素时用 i 删除 li[i] ，结果删除部分出现了问题。

代码：

//删除功能实现
var del = document.getElementsByClassName("del");
var allLis = document.getElementsByClassName("li");

//监听删除点击
for(let i = 0; i < del.length; i++){
    del[i].onclick = function(){
    	 allLis[i].remove()；
         console.log(i,del.length);
     }
}

乍一看，想当然的好像并没有什么问题，实际操作并不能成功，5 条数据下，从上往下删除，控制台的输出是：

分析产生这种情况的原因是： 编写代码时想当然的考虑的是在allLis数组和del数组一一对应的情况下进行监听删除，是这样的：

数组del	数组allLis
del[0]	allLis[0]
del[1]	allLis[1]
del[2]	allLis[2]
del[3]	allLis[3]

但事实上，每次点击删除时都对allLis这个数组产生了影响，这个数组都会减少1，但是没有对数组重新遍历监听，使得每次点击删除时触发的i和allLis不能一一对应，于是产生了这样的错误。

---

改进

不用这两个数组之间的一一对应关系来删除，直接监听del的点击，干掉自己的 “爹”，而不采用，干掉和i关联起来的allLis[i]。于是代码就变成了这样：

//删除功能实现
var del = document.getElementsByClassName("del");
var allLis = document.getElementsByClassName("li");

//监听删除点击
for(let i = 0; i < del.length; i++){
    del[i].onclick = function(){
         this.parentNode.remove();
         console.log(i,del.length);
     }
}

运行结果就非常的nice！

---

总结：这个例子主要是想说明，不要尝试监听一个将要被改变的数组元素的事件，把索引和别的数组关联起来做事情，因为数组每改变一次的索引都非之前的索引，肯定会出错。