事件委托实现点击元素增加删除

结构：

<!-- 事件委托 -->

<div id="father">

           <div>1</div>

           <div>2</div>

           <div>3</div>

</div>

<button style="float:left;" id="addli">添加一个 li</button>

<button style="float:left;" id="delli">删除一个 li</button>

mounted() {

           var mul = document.getElementById('father')

           var mli = mul.getElementsByTagName('div')

           var sum = mli.length

           var mydom = document.getElementById('father')

            mydom.onclick = function(e) {

                           // 点击123单各项自增

                        // var newli = document.createElement('div')

                        // newli.innerHTML = ++sum

                        // mydom.appendChild(newli)

             }

document.getElementById('addli').onclick = function() {

         var newli = document.createElement('div')

         newli.innerHTML = ++sum

         mul.appendChild(newli)

}

document.getElementById('delli').onclick = function() {

           mul.firstElementChild.remove()

}

// 动态的向父盒子father 标签中添加子标签，同时也需要在新添加的子标签中添加点击事件， 就必须通过事件委托来实现

}