点击Delete All按钮后数组数据删除需刷新页面才生效问题

已将showPro()函数置于全局作用域，在deleteAll()中调用该函数，但点击Delete All按钮时，dataPro数组与localStorage中的数据实际已被删除，必须刷新页面才能看到页面更新效果，如何解决？

原代码 #

// read data
function showPro() {
    let table = "";
    for(let i = 0 ; i < dataPro.length ; i++){
        table += `
        <tr>
        <td>${i}</td>
        <td>${dataPro[i].title}</td>
        <td>${dataPro[i].price}</td>
        <td>${dataPro[i].taxes}</td>
        <td>${dataPro[i].ads}</td>
        <td>${dataPro[i].discount}</td>
        <td>${dataPro[i].total}</td>
        <td>${dataPro[i].category}</td>
        <td><button id="update">update</button></td>
        <td><button onclick ="deleteData(${i})" id="delete">delete</button></td>
        </tr>
        `
        document.getElementById('tbody').innerHTML = table;
    }
    let btnDelete = document.getElementById('deleteAll')
    if(dataPro.length > 0){
        btnDelete.innerHTML = `
        <button onclick="deleteAll()">Delete All</button>
        `
    }else{
        btnDelete.innerHTML = ""
    }
}
showPro()

// delete data 
function deleteData(i) {
    dataPro.splice(i,1);
    localStorage.product = JSON.stringify(dataPro);
    showPro();
}
function deleteAll(){
    localStorage.clear()
    dataPro.splice(0)
    showPro()           //  CHECK !!! it doesn't delete until you reload
}

解决方法 #

问题出在两个地方，分别修正即可：

1. 修正showPro()的DOM更新逻辑

原代码中document.getElementById('tbody').innerHTML = table;放在了for循环内部，当dataPro数组为空时，循环根本不会执行，这行代码也就不会运行，导致tbody保留旧数据。把这行代码移到循环外部，不管数组有没有数据，都能强制更新tbody内容：

function showPro() {
    let table = "";
    for(let i = 0 ; i < dataPro.length ; i++){
        table += `
        <tr>
        <td>${i}</td>
        <td>${dataPro[i].title}</td>
        <td>${dataPro[i].price}</td>
        <td>${dataPro[i].taxes}</td>
        <td>${dataPro[i].ads}</td>
        <td>${dataPro[i].discount}</td>
        <td>${dataPro[i].total}</td>
        <td>${dataPro[i].category}</td>
        <td><button id="update">update</button></td>
        <td><button onclick ="deleteData(${i})" id="delete">delete</button></td>
        </tr>
        `
    }
    // 将DOM更新移到循环外部
    document.getElementById('tbody').innerHTML = table;
    let btnDelete = document.getElementById('deleteAll')
    if(dataPro.length > 0){
        btnDelete.innerHTML = `
        <button onclick="deleteAll()">Delete All</button>
        `
    }else{
        btnDelete.innerHTML = ""
    }
}

2. 修正deleteAll()的数组清空逻辑

dataPro.splice(0)不会清空数组（splice第二个参数默认是0，即不删除任何元素），改为直接赋值空数组，同时同步更新localStorage（如果不需要清空整个localStorage，只更新product键更稳妥）：

function deleteAll(){
    // 直接清空数组
    dataPro = [];
    // 同步更新localStorage的product数据
    localStorage.setItem('product', JSON.stringify(dataPro));
    // 如果确实需要清空整个localStorage，保留下面这行，否则可以删除
    // localStorage.clear();
    showPro();
}

内容的提问来源于stack exchange，提问作者Dreamer2005