Realtime Database (edit& delete)- Todo List - Part 3 - Firebase Basics Series

In the last post I have shown you how we can use Firebase's Realtime Db and implemented it also in our todo app but we were only able to add things into the toto list.

So today I will show you how you can delete things from todo list.

Deleting the task

To delete data is very simple just get the reference and delete it, for that I am adding onclick on the delete button which will call a delete function with taskID as parameter.

<button class="delete" onclick="delTask('${taskID}');">

Now, in the delTask() function we will reference the task using task id and to remove it add .remove() like this,

const delTask = (taskID) => {
    database.ref('tasks/'+taskID).remove();
}

As the you can see now the delete button is working so let's move on to edit button.

Edit task popup

In order to edit the task we require a popup which will contain a form to edit the task.

To make this popup simple create a <div> with a heading, text input and button and fix the position of div at center of screen set the <div> hidden property to true <div hidden="true"> it will be displayed using javascript when edit button is clicked.

I made it like this you can use your creativity.

Edit the task in database

similar to delete button add onclick to updatePopup function and pass two parameters this time the taskID and the task itself.

<button class="update" onclick="updatePopup('${data[taskID].task.replace(/'/g, "\\'")}','${taskID}');">

this function will open the edit popup and then we will set the text input value to the task then it can be edited and using the task id we will update the task.

if you are thinking why I have added .replace(/'/g, "\\'") then it's a regex statement to replace all ' with \' so that task with single quote can also be edited.

updateForm.onsubmit = (e) =>{
    e.preventDefault();
    database.ref('tasks/'+updateTaskid.value).update({
        'task':updateText.value
    })
    updateSection.hidden = true;

}

in the update button in popup will call another function which will take the new edited task and update it, here also a .update() will be used like .set() and the changed data will be passed as parameter.

Try it yourself

Syntax to Remember by now

Here are the code blocks you can have look to review what we have done by now

• Call the database instance ```

const database = firebase.database();

- refer the path to object, basically a location to the object

database.ref('tasks');

- push data to reference in form of object

database.ref('tasks').push().set({
'task' : taskInput.value
})

- `.on` to read data when a change occur in reference. all the data contained in `snapshot.val();` and for loop can be used to get each part of data.

database.ref('tasks').on('value',(snapshot) => {

data = snapshot.val();  //data is a object with all data

for(var taskID in data){
    const eachData = data[taskID]; 
    //use for loop to get each
}

})

- changing `.on` to `.once` will only take data when Loaded

database.ref('tasks').once('value',(snapshot) => {
data = snapshot.val();
})

- to remove data from a reference

database.ref('tasks/TaskID').remove();

- use .update() to update data
specified reference will altered

database.ref('tasks/TaskID').update({
'task':'Updated Task'
})

<hr>
#What Next
There is one more thing which is important and haven't discussed by now **Querying** the database, I hope you know what that mean.

We will be exploring query in Realtime Db and will make another project also to see how it works.

<hr>

>Follow me to get updates tomorrow

    
      

        
      
    
  

    

Areeb ur RubFollow

    

       Arduino | Python | TypeScript | Next Js | Love learn making things
    
  


<a href="https://www.buymeacoffee.com/areeburrub" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>