Remove object from firebase using JavaScript

Question

I am setting some objects on firebase-database, and showing them on a HTML table with 'child_added' and append() to dynamically add them as soon as they are added to the database, and there has to be a delete button on each row of the table, but the problem is, I can't get this delete button to work...

This is how the database structure looks like:

Assets: {
    -KkBgUmX6BEeVyrudlfK: {
        id: '-KkBgUmX6BEeVyrudlfK',
        name: 'John',
        brand: 'HP'
    }
    -KkDYxfwka8YM6uFOWpH: {
        id: '-KkDYxfwka8YM6uFOWpH',
        name: 'Jack',
        brand: 'Dell'
    }
}

And this is my index.js:

var rootRef = firebase.database().ref().child("Assets");
$("#table_body").on('click','.delete-btn', function(e){
    var $row = $(this).closest('tr'),
       rowId = $row.data('id');
    var assetKey = rootRef.child("id");
    //it should remove the firebase object in here
    rootRef.child(assetKey).remove()
    //after firebase confirmation, remove table row
    .then(function() {
      $row.remove();
    })
    //Catch errors
    .catch(function(error) {
      console.log('ERROR');
    });  
});

rootRef.on("child_changed", snap => {

  var assetKey = snap.child("id").val();
  var name = snap.child("name").val();
  var brand = snap.child("brand").val();

$("#table_body").append("<tr data-id='"+assetKey+"'>"+
                          "<td>" + name + "</td>" +
                          "<td>" + brand + "</td>" +

                          "<td><div buttons>"+
                                  "<button class='delete-btn>delete</button>"+
                                  "</div></td></tr>");
});

The assetKey that is inside rootRef.on("child_changed", snap => { if showed on console.log returns the right value for the object key, but the 'assetKey' on $("#table_body").on('click','.delete-btn', function(e){ is not working properly...

Paulo Mattos · Accepted Answer · 2017-05-16 00:45:04Z

2

This line looks wrong to me (trying to get the nonexistent id property of the top level Assets node):

var assetKey = rootRef.child("id");

Try this instead:

var rowId = $row.data('id');
rootRef.child(rowId).remove()
...

edited May 16, 2017 at 0:45

answered May 16, 2017 at 0:31

Paulo Mattos

19.4k10 gold badges80 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Leonardo Carvalho Over a year ago

THANK YOU! This solved my problem, it is now working beautifully :D

Paulo Mattos Over a year ago

@LeonardoCarvalho Blz cara! Saudações do Rio de Janeiro ;-)

Leonardo Carvalho Over a year ago

Actually... There is a problem here, when I remove a row, it adds another one and then remove it (really fast), I think its because of the 'child_added', 'child_removed' and 'child_changed', it removes the row at the same time that it adds another row with the same information...

Paulo Mattos Over a year ago

@LeonardoCarvalho The standard SO practice here would be to open a new question and show us the relevant code. You will get faster results that way... ;)

Paulo Mattos Over a year ago

...and link back to this question as reference.

|

Collectives™ on Stack Overflow

Remove object from firebase using JavaScript

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related