delete data from Array dirrectly when pushing a button

Question

// 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 realod
}

i have put the showProduct function in the global scope and in the delete all function so at the moment I push the delete all button all the data will be removed from the dataPro Array and the local storage actually, that happend but i have to reload the page to see it .