从 Firebase 实时数据库中删除数据并在 javascript 中更新应用程序

Question

我想通过单击 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();    
    }

Answer 1

是的！据我所知，您必须刷新页面才能获取更新的数据。
这是因为您在事件侦听器中使用了“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。