Question

This is the basic idea of my code. I removed a lot of extra stuff from my actual code, but it was mostly css – none of it should have any affect on this…

listRef.on('child_removed', function(childSnapshot, prevChildName) {
    alert('child removed!');
});

listRef.on('child_added', function(childSnapshot, prevChildName) {
    itemRef = childSnapshot.ref();

    alert('child added!);

    itemRef.on('value', function(snapshot){
        alert('item value changed!');

        var name = snapshot.val().name;  // if I remove this line, child_removed is called
        $("#name").html(name);
    });
});

$("#button").click(function() {
    itemRef.remove();
});

The problem is that on $("#button") click, itemRef is removed from listRef in Firebase, but the 'child_removed' event is never triggered… If I take out

driveRef = undefined;

then child_removed is called…

Everything else works – $("#name") is updated and all of the alert() dialogs I am using to test it are working fine – the only problem is child_removed not being called.

Answer 1

I think Kato’s comment is right on. If you look in your browser dev tools javascript console, or better yet set it to break on all exceptions (e.g. directions for Chrome), I bet you’ll find your ‘value’ callback is being called with snapshot.val() == null when the child is removed, and so your code throws an exception which is preventing Firebase from raising further events (i.e. your child_removed event).

We have some feature work planned to make Firebase a little more tolerant of event callbacks throwing exceptions, but for now the fix is to check for snapshot.val() == null in your ‘value’ callback.