使用ES6语法中面向对象维护一个列表，点击删除，可删除整行

使用ES6语法中面向对象维护一个列表，点击删除，可删除整行

要实现以下效果，要求使用面向对象来维护，点击删除，可以删除整行；

这里我使用的方法为ES6中的class语法，代码如下：

<ul class="list">
    <li>  %%%%%%%%%  第一行<span class="del">删除</span></li>
    <li>  %%%%%%%%%  第二行<span class="del">删除</span></li>
    <li>  %%%%%%%%%  第三行<span class="del">删除</span></li>
    <li>  %%%%%%%%%  第四行<span class="del">删除</span></li>
    <li>  %%%%%%%%%  第五行<span class="del">删除</span></li>
  </ul>
  <ul class="list">
    <li>  *********  第一行<span class="del">删除</span></li>
    <li>  *********  第二行<span class="del">删除</span></li>
    <li>  *********  第三行<span class="del">删除</span></li>
    <li>  *********  第四行<span class="del">删除</span></li>
    <li>  *********  第五行<span class="del">删除</span></li>
  </ul>
    <script>
        class List{
            constructor (sel){
                this.el = Array.from(document.querySelectorAll(sel));
                let self = this;
                this.el.forEach(item => {
                    item.addEventListener('click',function(e){
                      if(e.target.className.indexOf('del' > -1)){
                          self.removeItem.call(self,e.target);
                      }
                    })
                });
            };

            removeItem (target) {
                let self = this;
                let findParent = function (node) {
                    let parent = node.parentNode;
                    let root = self.el.find(item => item === parent);
                    if (root) {
                        root.removeChild(node);
                    } else {
                        findParent(parent);
                    }
                };
                findParent(target);
            }
        }
        window.addEventListener('DOMContentLoaded',function(){
          new List('.list');
        });
    </script>

可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。
constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。

构造函数的prototype属性，在 ES6 的“类”上面继续存在。事实上，类的所有方法都定义在类的prototype属性上面。
如：

 class Point {
    constructor() {
      // ...
    }
    toString() {
      // ...
    }
    toValue() {
      // ...
   }
 }
 
 // 等同于
 Point.prototype = {
   constructor() {},
   toString() {},
   toValue() {},
 };