title: I want to delete items from Firebase realtime database on button click in JavaScript
body: <p>I want to delete the item from the Firebase real-time database by clicking the button in JavaScript. How can I delete it? I'm getting this error: app.js:61 Uncaught ReferenceError: the key is not defined in console.</p>
  <p>I have uploaded my complete code on jsfiddle. Where is my mistake?</p>
  <p><a href="https://jsfiddle.net/waqasumer/z7wt6d0e/7/" rel="nofollow noreferrer">https://jsfiddle.net/waqasumer/z7wt6d0e/7/</a></p>
  <pre><code>    var main = document.getElementById(&quot;main-section&quot;);
  
  function saveData() {
      var todoItem = document.getElementById(&quot;todo-item&quot;);
  
      if (todoItem.value === &quot;&quot;) {
          alert(&quot;Please enter task&quot;);
      } 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(&quot;todo-item&quot;).value = &quot;&quot;;
      }
  
  }
  
  function getData() {
      firebase.database().ref('tasks').on('child_added', function (data) {
          var item = data.val().todoItem;
          for (var i = 0; i &lt;= item.length; i++) {
              var row = document.createElement(&quot;div&quot;);
              row.setAttribute(&quot;class&quot;, &quot;row&quot;);
  
              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);
              break;
  
          }
      })
  }
  
  getData();
  
  function deleteTodo(e) {
      firebase.database().ref('tasks').child(key).remove();
  }
  </code></pre>