动态渲染数据列表(同步更新数组中数据)
<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>