Блог

Я хочу удалить элемент из базы данных Firebase в реальном времени, нажав кнопку в JavaScript. Как я могу это удалить? Я получаю эту ошибку: app.js: 61 Ошибка неперехваченной ссылки: ключ не определен в консоли.

Я загрузил свой полный код на 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();
}
  

Сначала, я думаю, вы захотите получить свои данные по-другому. Попробуйте что-то вроде этого:

 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.

Тогда один из способов сделать то, что вы ищете, — заполнить вашу разметку нажатой клавишей, соответствующей задаче. Вы можете сделать это аналогично тому, как вы извлекли элемент todo, но также получить ключ:

• var item = task.TodoItem;
• var TaskKey = task.key

Затем заполните атрибут данных в элементе строки ключом:

• row.setAttribute(«класс», «строка»);
• row.setAttribute(«data-key», «TaskKey»);

Затем в вашей функции удаления выполните следующее:

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

Теперь «ключ» в вашей функции удаления должен иметь значение.

Я отредактировал 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();
}