【动态渲染数据列表】

动态渲染数据列表（同步更新数组中数据）

<ul id="list"></ul>

    <script>
        var oUl=document.querySelector('ul'); 
        var arr=['1','2','3'];
        // 渲染数据列表
        arr.forEach( (v,k) => {
            var oLi = document.createElement('li');
            oLi.innerHTML=v;

            var oBtn = document.createElement('button');
            oBtn.innerHTML='删除';
            oBtn.onclick=del;

            oLi.appendChild(oBtn);
            list.appendChild(oLi);
            // 添加自定义属性
            var prev = oUl.lastElementChild;
            // console.log(prev);
            prev && prev.setAttribute('data-id',k);
        });
        // 删除数据项
        function del(){
            // 删除节点
            this.parentNode.remove();
            // 删除数组项
            // arr.splice(this.parentNode['data-id'],1); 
            console.log(this.parentNode);
            console.log(this.parentNode.getAttribute('data-id'));
            // console.log(this.parentNode.dataset.id);
            arr.splice(this.parentNode.getAttribute('data-id'),1)
            console.log('当前数据：',arr);
        }
    </script>