尝试使用onclick复选框删除Firebase数据库中的项目时遇到很多问题,但无法正常工作。
我能够将数据保存到Firebase数据库中,并且可以使用$(this).remove在底部的onclick上将其从HTML中删除。但是我无法在Firebase中模仿它。 / p>
// Initialize Firebase
var config = {
apiKey: "AIzaSyDZwIxXFNk928XzjMRZ6bpXVkeuEMbwIUI",
authDomain: "in-the-know-a0b16.firebaseapp.com",
databaseURL: "https://in-the-know-a0b16.firebaseio.com",
projectId: "in-the-know-a0b16",
storageBucket: "",
messagingSenderId: "447330895711"
};
firebase.initializeApp(config);
//create a variable to reference the database
var database = firebase.database();
//initialize value
var todos = "";
var todoclose = $("<button>");
todoclose.addClass("checkbox");
todoclose.text("☑");
$(document).ready(function() {
// user clicked on the add button in the to-do field add that text into the
//to-do text
$('#add-todo').on('click', function(event) {
event.preventDefault();
//values per text box
todos = $("#todo-input").val().trim();
//test values from textbox
console.log(todos);
//code for handling the push
database.ref().push({
todos: todos
});
});
//firebase watcher
database.ref().limitToLast(1).on('value', snapshot => {
snapshot.forEach(snap => {
todos = snap.child("todos").val();
//prepend values to html
$("<div/>", {
"class": "to-do-item"
}).append([todoclose, todos]).appendTo($(".col-4"));
//to remove item from checklist
$(document.body).on("click", ".to-do-item",function() {
$(this).remove();
});
});
});
});
HTML
<div class ="col-4">
<form role = "form">
<div class = "form-group row">
<div class = "To-Do-List">
<label for="todo-input">Add Your To Do List Here:</label>
</div>
<input class="form-control" id="todo-input" type = "text">
</div><div class="button">
<button class ="btn btn-danger" id="add-todo" type="submit">Add</button></div>
</form>
</div>
<tbody id = "table_body">
</tbody>