Edit and Delete firebase

Question

   <table>
      <tr>
         <td>Name: </td>
         <td><input type="text" name="user_name" id="user_name"  /></td>
      </tr>
      <tr>
         <td>Phone: </td>
         <td><input type="text" name="user_phone" id="user_phone"  /></td>
      </tr>
      <tr>
         <td>Address </td>
         <td><select name="user_ads" id="user_ads">
             <option value="A">A</option>
             <option value="B">B</option>
             <option value="C">C</option>
             </select>
      <tr>
         <td colspan="2">
             <input type="button" value="Save" onclick="save_user();"  />
             <input type="button" value="Update" onclick="update_user();"  />
         </td>
      </tr>
    </table>

  <table id="users_list" border="1">
   <tr>
       <td>NAME</td>
       <td>PHONE</td>
       <td>ADDRESS</td>
       <td>ACTION</td>
   </tr>
   </table>

   var usersList = document.getElementById('users_list');
   var databaseRef = firebase.database().ref('users/');
   var rowIndex = 1;


   databaseRef.once('value', function(snapshot) {
     snapshot.forEach(function(childSnapshot) {
        var childKey = childSnapshot.key;
        var childData = childSnapshot.val();
        var button = document.createElement("button");
        var button2 = document.createElement("button");
        button.innerHTML = "Edit";
        button2.innerHTML = "Delete";

        var row = usersList.insertRow(rowIndex);
        var cellName = row.insertCell(0);
        var cellPhone = row.insertCell(1);
        var cellAddress = row.insertCell(2);
        var cellButton = row.insertCell(3);
        cellName.appendChild(document.createTextNode(childData.name));
        cellPhone.appendChild(document.createTextNode(childData.phone));
        cellAddress.appendChild(document.createTextNode(childData.address));
        cellButton.appendChild(button);
        cellButton.appendChild(button2);

        button.onclick = delete;
        button2.onclick = edit;

        rowIndex = rowIndex + 1;
     });
    });


    function delete(){
           var row = document.getElementById("users_list");
           firebase.database().ref().child('/users/' + user_id).remove();

           alert('The user is deleted successfully!');

           reload_page();

          }

    function edit {

     }


        function update_user(){

           var data = {
               user_id: user_id,
               user_name: user_name
           }

           var updates = {};
           updates['/users/' + user_id] = data;
           firebase.database().ref().update(updates);

           alert('The user is updated successfully!');

           reload_page();
        }

</script>

I've created a database named users in firebase with data store name, phone and address. I've retrieved the data from firebase in the table and created a new column with edit button and delete button in the table. What should I add in delete function that enable to delete the firebase data in the row when the button delete was click and when edit button in the row was click it retrieve the firebase data in the row to the table form and click update to update the data in firebase.

A similar output:

Answer 1

use this code to delete,

considering users is your root, use users/ instead of /users/

  var ref = firebase.database().ref().child('users/' + user_id)
    ref.once("value")
    .then(function(snapshot) {
       snapshot.ref.remove();
       alert("user deleted..!");
   }).catch(function(error) {alert("Data could not be deleted." + error);});

use this code to update,

       var updates = {};
       updates['/users/' + user_id] = data;
       var ref = firebase.database().ref().child('users/' + user_id)
       ref.update(updates).then(function(){
          ref.on('value', function(snapshot) {
            alert("user updated");
         });
       }).catch(function(error) {alert("Data could not be saved." + error);});