Delete data from Firebase realtime database and update application in javascript

Question

I want to delete an item from the Firebase real-time database by clicking the button in JavaScript. I get data from the database directly in the frontend. When I click the Delete button, the corresponding object should be removed from the database and the front end. I tried some logic functions and deleted a certain element from the database, but my HTML page did not update.

I have to refresh the page every time. How can I delete it in real-time?

Here is my complete code 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

Yes, As far as I saw. you have to refresh the page to get updated data.
This is because you are using 'child_added' in your event listener which gets triggered only when a new child is added.

firebase.database().ref('tasks').on('child_added', function (data){})

You can just refer this and add value listeners to your function such that it retrieves data every time when the child gets changed.
https://firebase.google.com/docs/database/web/read-and-write#listen_for_value_events

EDIT

You can also delete a value using set() or update() method by passing null.
In this case, you can have a callback function. You can use this callback function to update your DOM.