Firebase Web - .remove() seems like it's not working

Question

I am writing a web application that accesses the Firebase Realtime Database. I just started to have intermittent issues removing records in my app. I have two lines in a row that are supposed to delete two different records. The first signs of the problem were that I would send the command for two records to be deleted and only the first would delete.

I attempted several things in troubleshooting. I attempted replacing .remove() with .set(null) as described on https://firebase.google.com/docs/database/web/read-and-write#delete_data. I also added .then() and .catch() commands as described https://firebase.google.com/docs/reference/js/firebase.database.Reference#remove. Changing the order of the commands ended up getting both .remove() commands to work temporarily. Moments later, upon further testing, I found neither .remove() command to be working.

I suspect that the issue may be related to the a new release that came out today as described https://firebase.google.com/support/release-notes/js?authuser=0. Once I saw that there was an update, I updated the import line in my html doc and that did not make any visible difference.

Here is a code snippet from my app where the deletion should occur. Note that equivalent code was working 12 hours ago so I don't think the reference is the problem. Also note that Firebase is not providing any errors even though a failed .remove() or .set(null) should be caught in the .catch() call.

$("#edit-event-delete-btn").click(function(){
    bootbox.confirm({
        message: "Are you sure you want to delete this event?",
        callback: function (result) {
            if (result) {
                var eventRef = firebase.database().ref("events/" + editEventEventSelectInputJQ.val());
                var userEventRef = firebase.database().ref("users/" + firebase.auth().currentUser.uid + "/events/" + editEventEventSelectInputJQ.val())
                eventRef.set(null)
                    .then(function() {
                    console.log("Remove succeeded.")
                    })
                    .catch(function(error) {
                        console.log("Remove failed: " + error.message)
                    });
                userEventRef.set(null)
                    .then(function() {
                    console.log("Remove succeeded.")
                    })
                    .catch(function(error) {
                        console.log("Remove failed: " + error.message)
                    });
            }
        }
    })
});

I am simply asking here because Google suggests asking here before asking them.

I would appreciate any helpful input.

**Update**

Here are my Firebase Database rules:

{
  "rules": {
    ".read": "true",
    ".write": "auth != null"
  }
}

And here is a screenshot of my database

Answer 1

There are two things I would check;

1. What do your firebase rules look like, do you have permission to delete the object? I assume yes, because firebase doesn't return any errors.

2. Check the path you're attempting to delete, are you sure it's correct? Try to run the below code, are the paths correct?

   $("#edit-event-delete-btn").click(function(){
       bootbox.confirm({
           message: "Are you sure you want to delete this event?",
           callback: function (result) {
               if (result) {
                   var eventPath = "events/" + editEventEventSelectInputJQ.val();
                   var eventRef = firebase.database().ref(eventPath);
   
                   var userEventPath = "users/" + firebase.auth().currentUser.uid + "/events/" + editEventEventSelectInputJQ.val();
                   var userEventRef = firebase.database().ref(userEventPath)
                   eventRef.set(null)
                       .then(function() {
                       console.log("Remove succeeded.", eventPath)
                       })
                       .catch(function(error) {
                           console.log("Remove failed: " + error.message, eventPath)
                       });
                   userEventRef.set(null)
                       .then(function() {
                       console.log("Remove succeeded.", userEventPath)
                       })
                       .catch(function(error) {
                           console.log("Remove failed: " + error.message, userEventPath)
                       });
               }
           }
       })
   });
   

Answer 2

Try this way ..
But I have to ask , what is the value come from this "editEventEventSelectInputJQ.val()", is it object Id or Value object?

    $("#edit-event-delete-btn").click(function(){
    bootbox.confirm({
        message: "Are you sure you want to delete this event?",
        callback: function (result) {
            if (result) {
               var object={}
               object["events/" + editEventEventSelectInputJQ.val()]=null;
        firebase.database().ref().update(object).then(function(success){
          console.log("success")
        }).catch((error)=>{
          console.error("Error: " + error.code);
        });



            }
        }
    })
});