在Web開發中，刪除數據是一個常見的操作。通常情況下，我們會使用Ajax來完成這個任務。Ajax（Asynchronous JavaScript And XML）是一種用于在不刷新整個頁面的情況下，通過與服務器的異步通信來更新部分頁面的技術。而在刪除數據時，我們希望在刪除之后頁面上不再顯示該數據，但是有時候我們會發現，盡管數據已經被成功刪除，但是頁面上仍然會顯示該數據。這個問題的解決方法實際上并不難，我們只需要在刪除數據成功后，使用前端代碼將該數據在頁面上移除即可。

舉個例子來說明這個問題。假設我們有一個待辦事項列表，用戶可以點擊一個按鈕來刪除某個待辦事項。代碼如下：

var deleteButton = document.getElementById('delete-button');
deleteButton.addEventListener('click', function() {
// 發送Ajax請求刪除數據
// ...
// 更新頁面
var todoItem = document.getElementById('todo-item');
todoItem.parentNode.removeChild(todoItem);
});

在這個例子中，我們通過id獲取了刪除按鈕，并為其添加了一個事件監聽器。當用戶點擊該按鈕時，我們會發送Ajax請求來刪除數據，并且在刪除成功后，使用parentNode.removeChild()方法將該待辦事項從頁面上移除。

這只是一個簡單的例子，實際項目中可能會更加復雜。無論是使用原生JavaScript還是其他前端框架，我們都可以采用類似的方式來解決這個問題。關鍵是在數據刪除成功后，及時更新頁面內容，使得用戶在操作后能夠看到正確的結果。

在某些情況下，我們可能無法通過直接移除DOM元素的方式來解決這個問題。比如，在使用一些前端框架時，我們可能會采用數據綁定的方式來更新頁面。在這種情況下，我們需要通過更新數據源或模型來反應數據的變化，從而使得頁面上對應的數據消失。

舉個例子來說明這種情況。假設我們使用Vue.js來構建一個待辦事項列表，并且使用Vue的指令v-for來渲染列表中的每一項，代碼如下：

<div id="app">
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
<button @click="deleteItem">刪除</button>
</div>

在這個例子中，v-for指令會根據items數組的內容來生成相應的列表項。當用戶點擊刪除按鈕時，我們會調用deleteItem方法來刪除相應的數據，代碼如下：

new Vue({
el: '#app',
data: {
items: ['待辦事項1', '待辦事項2', '待辦事項3']
},
methods: {
deleteItem: function() {
// 發送Ajax請求刪除數據
// ...
// 更新數據源
var index = this.items.indexOf('待辦事項1');
if (index > -1) {
this.items.splice(index, 1);
}
}
}
});

在這個例子中，deleteItem方法會向服務器發送Ajax請求來刪除數據，并且在刪除成功后，通過splice方法將對應的數據從items數組中移除。由于使用了Vue的數據綁定，當數據源發生變化時，頁面上對應的數據也會被自動移除。

總之，刪除數據后頁面上仍然顯示該數據的問題并不復雜，只需要在刪除數據成功后，使用前端代碼將該數據在頁面上移除即可。無論是使用原生JavaScript還是一些前端框架，我們都可以采用類似的方式來解決這個問題，使得用戶在操作后能夠看到正確的結果。