How to delete firebase database node from html table using javascript?

Question

I want to delete firebase realtime database from my html table. I used multiple nodes to store data in firebase database, here is my code

var database = firebase.database();
database.ref('app-data').on('value', function(snapshot){
    if(snapshot.exists()){
        var content = '';
        snapshot.forEach(function(data){
            var val = data.val();
            var childKey = data.key;
            content +='<tr>';
            
            content += '<td>' + val.desc + '</td>';
            content += '<td>' + "<input type='button' value='Delete' class='delete' onclick='delete_row("+childKey+")'>" + '</td>';

            content += '</tr>';
        });
        $('#todays_quote').append(content);
    }
});

function delete_row(childKey) {
  var dataRef = firebase.database.ref("app-data'").child(childKey);
  dataRef.remove()
  .then(function(){
    console.log("Remove succeeded.")
  })
  .catch(function(error){
    console.log("Remove Failed!"+error.message)
  });
}

Data successfully show in html table but I am not figure out how to add delete function, I want that when user click on specific delete button that time delete this data only, here are few database images

The below screenshot is my html table where the data is showing from the firebase database

Can anyone help me to implement this thing, thanks:)

Answer 1

I think there is a problem on the string. Missing the quotes.

content += '<td>' + "<input type='button' value='Delete' class='delete' onclick=\"delete_row('"+childKey+"')\">" + '</td>';

The function should be called as delete_row('YOUR ID') .

Hope that works!