我想在 JavaScript 中单击按钮时从 Firebase 实时数据库中删除项目

Question

我想通过单击 JavaScript 中的按钮从 Firebase 实时数据库中删除该项目。我怎样才能删除它？我收到此错误：app.js:61 Uncaught ReferenceError: key is not defined in console.

我已经在 jsfiddle 上上传了我的完整代码。我的错在哪里？

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

首先，我认为您会希望以不同的方式获取数据。试试这样的：

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];
    }
  })
}

然后您可以使用点符号访问您保存在 firebase 中的项目，例如 task.todoItem 用于任务内容，task.key 用于键值firebase 已推送。

然后，一种方法来完成您正在寻找的事情是使用与任务对应的按键填充您的标记。您可以像拉取待办事项一样执行此操作，但也可以获取密钥：

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

然后用键填充行项上的数据属性：

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

然后在您的删除功能中，执行以下操作：

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

现在删除函数中的“键”应该有一个值。

我已经在你的 sn-p 中编辑了 JS 代码以合并我的更改，看看它是否有效：

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();
}