在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还是一些前端框架，我们都可以采用类似的方式来解决这个问题，使得用户在操作后能够看到正确的结果。