lundi 22 mai 2017

Select multiple firebase data and delete from the application

I am currently working on a project using Firebase in a web application. Currently I have the necessary JS in place to add, remove and change data from within Firebase and this updates automatically in the web application.

The application can also add data from the application into the Firebase database and is displayed and all the data is displayed into the application as li elements into a ul.

The following JS is my code for all of this:

var myFirebase = new Firebase('<FIREBASE REF>');

var input = document.querySelector('#input');
var submit = document.querySelector('#submit');

const ulList = document.getElementById('list');

const dbRefObject = firebase.database().ref().child('object');
const dbRefList = dbRefObject.child('Book');

submit.addEventListener("click", function() {
var data = input.value;
myFirebase.push({book:data});
input.value="";
});

dbRefList.on('child_added', snap => {
  const li = document.createElement('li');
  li.innerText = snap.val().book;
  li.id = snap.key;
  ulList.appendChild(li);

});

dbRefList.on('child_changed', snap => {
  const liChanged = document.getElementById(snap.key);
  liChanged.innerText = snap.val().book;

});

dbRefList.on('child_removed', snap => {
  const liToRemove = document.getElementById(snap.key);
  liToRemove.remove();

});

The code displays this is in the application: Application Screenshot

My question is this:

How can I select multiple items from the list view in the application so I can perform actions like delete the data from the application and the database. I would like to be able to select each item and it be highlighted a different colour and all the highlighted li items can be deleted.

I'm very confused as how to do this so any help will be greatly appreciated - Please let me know if you need any more information or code snippets.

Many thanks, G




Aucun commentaire:

Enregistrer un commentaire