Realtime Database (edit& delete)- Todo List - Part 3 - Firebase Basics Series
Tags: firebase, tutorial, beginners, codenewbie
Published: 2021-06-13 18:14:21

<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>

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();
}
```
![delete working](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2k5hkiol5uedo3tgt2vj.gif)
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.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lnfk3pmadgta2y4ue1tc.png)
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.

![edit working](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/71fdb6rpcrxdxyse58m5.gif)
 
### Try it yourself

{% codepen https://codepen.io/areeburrub/pen/yLMQgVr %}

<hr>
Till Now most of our database problems are solved now we can create database add data to it, edit it and view it also whenever required.
### 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
{% user areeburrub %}

<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>