title: Delete data from Firebase realtime database and update application in javascript
body: <p>I want to delete an item from the Firebase real-time database by clicking the button in JavaScript. I get data from the database directly in the frontend. When I click the Delete button, the corresponding object should be removed from the database and the front end. I tried some logic functions and deleted a certain element from the database, but my HTML page did not update.</p>
  <p>I have to refresh the page every time. How can I delete it in real-time?</p>
  <p>Here is my complete code <a href="https://jsfiddle.net/waqasumer/x1ugL5yr/" rel="nofollow noreferrer">https://jsfiddle.net/waqasumer/x1ugL5yr/</a></p>
  <pre><code>function deleteTodo(e) {
      const key = e.parentElement.parentElement.getAttribute('data-key');
      firebase.database().ref('tasks').child(key).remove();    
  }        
  
  var main = document.getElementById(&quot;main-section&quot;);
      
      function saveData() {
          var todo = document.getElementById(&quot;todo-item&quot;);
      
          if (todo.value === &quot;&quot;) {
              alert(&quot;Please enter task&quot;);
          } else {
              var key = firebase.database().ref('tasks').push().key;
              var tasks = {
                  todo: todo.value,
                  key: key
              }
              firebase.database().ref('tasks/' + key).set(tasks);
              document.getElementById(&quot;todo-item&quot;).value = &quot;&quot;;
          }
      }
      
      function getData() {
          firebase.database().ref('tasks').on('child_added', function (data) {
              var item = data.val().todo;
              var key = data.val().key;
              console.log(data.val());
      
              var row = document.createElement(&quot;div&quot;);
              row.setAttribute(&quot;class&quot;, &quot;row&quot;);
              row.setAttribute(&quot;data-key&quot;, key);
      
              var col1 = document.createElement(&quot;div&quot;);
              col1.setAttribute(&quot;class&quot;, &quot;col text&quot;);
              var task = document.createTextNode(item);
              col1.appendChild(task);
              row.appendChild(col1);
      
              var col2 = document.createElement(&quot;div&quot;);
              col2.setAttribute(&quot;class&quot;, &quot;col&quot;);
      
              var editBtn = document.createElement(&quot;button&quot;);
              editBtn.setAttribute(&quot;class&quot;, &quot;btn btn-success btn-circle btn-sm fa fa-pencil-square-o&quot;);
              editBtn.setAttribute(&quot;onclick&quot;, &quot;editTodo(this)&quot;);
              col2.appendChild(editBtn);
              row.appendChild(col2);
      
              var col3 = document.createElement(&quot;div&quot;);
              col3.setAttribute(&quot;class&quot;, &quot;col&quot;);
      
              var deleteBtn = document.createElement(&quot;button&quot;);
              deleteBtn.setAttribute(&quot;class&quot;, &quot;btn btn-primary btn-circle btn-sm btn-danger fa fa-remove&quot;);
      
              deleteBtn.setAttribute(&quot;onclick&quot;, &quot;deleteTodo(this)&quot;);
              col3.appendChild(deleteBtn);
              row.appendChild(col3);
              main.appendChild(row);
      
          })
      }
      
      getData();
      
      
      function deleteAll() {
          firebase.database().ref('tasks').remove();
          main.innerHTML = &quot;&quot;;
      }
      
      function deleteTodo(e) {
          const key = e.parentElement.parentElement.getAttribute('data-key');
          firebase.database().ref('tasks').child(key).remove();    
      }
  </code></pre>