javascript - 从 Firebase 实时数据库中删除数据并在 javascript 中更新应用程序
问题描述
我想通过单击 JavaScript 中的按钮从 Firebase 实时数据库中删除一个项目。我直接在前端从数据库中获取数据。当我单击删除按钮时,相应的对象应该从数据库和前端中删除。我尝试了一些逻辑函数并从数据库中删除了某个元素,但我的 HTML 页面没有更新。
我每次都必须刷新页面。如何实时删除?
这是我的完整代码https://jsfiddle.net/waqasumer/x1ugL5yr/
function deleteTodo(e) {
const key = e.parentElement.parentElement.getAttribute('data-key');
firebase.database().ref('tasks').child(key).remove();
}
var main = document.getElementById("main-section");
function saveData() {
var todo = document.getElementById("todo-item");
if (todo.value === "") {
alert("Please enter task");
} else {
var key = firebase.database().ref('tasks').push().key;
var tasks = {
todo: todo.value,
key: key
}
firebase.database().ref('tasks/' + key).set(tasks);
document.getElementById("todo-item").value = "";
}
}
function getData() {
firebase.database().ref('tasks').on('child_added', function (data) {
var item = data.val().todo;
var key = data.val().key;
console.log(data.val());
var row = document.createElement("div");
row.setAttribute("class", "row");
row.setAttribute("data-key", key);
var col1 = document.createElement("div");
col1.setAttribute("class", "col text");
var task = document.createTextNode(item);
col1.appendChild(task);
row.appendChild(col1);
var col2 = document.createElement("div");
col2.setAttribute("class", "col");
var editBtn = document.createElement("button");
editBtn.setAttribute("class", "btn btn-success btn-circle btn-sm fa fa-pencil-square-o");
editBtn.setAttribute("onclick", "editTodo(this)");
col2.appendChild(editBtn);
row.appendChild(col2);
var col3 = document.createElement("div");
col3.setAttribute("class", "col");
var deleteBtn = document.createElement("button");
deleteBtn.setAttribute("class", "btn btn-primary btn-circle btn-sm btn-danger fa fa-remove");
deleteBtn.setAttribute("onclick", "deleteTodo(this)");
col3.appendChild(deleteBtn);
row.appendChild(col3);
main.appendChild(row);
})
}
getData();
function deleteAll() {
firebase.database().ref('tasks').remove();
main.innerHTML = "";
}
function deleteTodo(e) {
const key = e.parentElement.parentElement.getAttribute('data-key');
firebase.database().ref('tasks').child(key).remove();
}
解决方案
是的!据我所知,您必须刷新页面才能获取更新的数据。
这是因为您在事件侦听器中使用了“child_added”,该事件侦听器仅在添加新孩子时才会触发。
firebase.database().ref('tasks').on('child_added', function (data){})
您可以仅引用它并将值侦听器添加到您的函数,以便每次更改子项时它都会检索数据。
https://firebase.google.com/docs/database/web/read-and-write#listen_for_value_events
编辑
您还可以使用 set() 或 update() 方法通过传递 null 来删除值。
在这种情况下,您可以使用回调函数。你可以使用这个回调函数来更新你的 DOM。
推荐阅读
- mongodb - MongoDB中的`db`命令和`show dbs`命令有什么区别?
- python - 熊猫:用范围函数替换数据框中的列
- r - 在 R 中合并一些大的 data.frames 列
- java - 为什么在实现(覆盖)具有此类约束的方法时,Java 允许忽略/删除通用约束?
- sql - SQL Server 存储过程对 200 万条记录进行排序、分页和过滤
- html - 如何修复嵌入的视频全屏按钮在 Wordpress 上不可点击?
- doctrine-orm - 如何在 Symfony 4 的 DoctrineFixtures 中排除一些要清除的表?
- opengl - 使用立方体贴图纹理时,Nvidia 上的 OpenGL 帧缓冲区未完成
- sql - 如何在 PLSQL 块的 DBMS 会话中获取受 DML 语句影响的总行数(不使用 SQL%ROWCOUNT)?
- python - 变量用作字典键时的Python魔术方法