I want to delete items from Firebase realtime database on button click in JavaScript

Question

I want to delete the item from the Firebase real-time database by clicking the button in JavaScript. How can I delete it? I'm getting this error: app.js:61 Uncaught ReferenceError: the key is not defined in console.

I have uploaded my complete code on jsfiddle. Where is my mistake?

https://jsfiddle.net/waqasumer/z7wt6d0e/7/

    var main = document.getElementById("main-section");

function saveData() {
    var todoItem = document.getElementById("todo-item");

    if (todoItem.value === "") {
        alert("Please enter task");
    } else {
        var key = firebase.database().ref('tasks').push().key;
        var tasks = {
            todoItem: todoItem.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().todoItem;
        for (var i = 0; i <= item.length; i++) {
            var row = document.createElement("div");
            row.setAttribute("class", "row");

            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);
            break;

        }
    })
}

getData();

function deleteTodo(e) {
    firebase.database().ref('tasks').child(key).remove();
}

Answer 1

First I think you'll want to get your data differently. Try something like this:

function getData() {
  tasks = [];
  firebase.database.ref('/tasks/').on('child_added', function (snapshot) {
    snapshot.forEach(function (childSnapshot) {
      var childData = childSnapshot.val();
      tasks.push(childData);
    });
    for (let i = 0; i < tasks.length; i++) {
      const task = tasks[i];
    }
  })
}

Then you can access the items you saved in firebase with dot notation, like task.todoItem for the content of the task and task.key for the key value that firebase pushed.

Then one way to do what you're looking for is to populate your markup with the pushed key that corresponds to the task. You can do it similar to how you pulled the todo item but also get the key:

• var item = task.todoItem;
• var taskKey = task.key

Then populate a data attribute on the row item with the key:

• row.setAttribute("class", "row");
• row.setAttribute("data-key", "taskKey");

Then in your delete function, do the following:

function deleteTodo(clickedElement) {
    const key = clickedElement.parentElement.getAttribute(data-key);
    firebase.database().ref('tasks').child(key).remove();
}

Now "key" in your delete function should have a value.

I've edited the JS code in your snippet to incorporate my changes, see if it works:

var main = document.getElementById("main-section");

function saveData() {
    var todoItem = document.getElementById("todo-item");

    if (todoItem.value === "") {
        alert("Please enter task");
    } else {
        var key = firebase.database().ref('tasks').push().key;
        var tasks = {
            todoItem: todoItem.value,
            key: key
        }
        firebase.database().ref('tasks/' + key).set(tasks);
        document.getElementById("todo-item").value = "";
    }

}

function getData() {
  tasks = [];
  firebase.database.ref('/tasks/').on('child_added', function (snapshot) {
    snapshot.forEach(function (childSnapshot) {
      var childData = childSnapshot.val();
      tasks.push(childData);
    });
    for (let i = 0; i < tasks.length; i++) {
      const task = tasks[i];
      var item = task.todoItem;
      var key = task.key;
      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 newTask = document.createTextNode(item);
      col1.appendChild(newTask);
      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);
      break;

      }
  })
}

getData();

function deleteTodo(clickedElement) {
    const key = clickedElement.parentElement.getAttribute('data-key');
    firebase.database().ref('tasks').child(key).remove();
}