Блог

Итак, у меня возникли небольшие трудности с удалением дочернего элемента ссылки из базы данных Firebase. Я использую javascript и пытаюсь добавить больше к источнику FriendlyChat, который они используют в качестве начального.

Вот что у меня есть для моей функции удаления, но по какой-то причине она не удаляется.

 FriendlyChat.MESSAGE_TEMPLATE =
    '<div class="message-container" style="padding-bottom: 30px;padding-top:30px">'  
      '<center><div class="spacing"><div class="pic"></div>  </div>'  
      '<div style="font-size:24px" class="message"></div><br>'  
      '<div style="font-size:20px;padding-left:0px" class="name"></div></center>'  
      '<div onClick="deleteMessage(this.id)" class="delete">Delete</a>'  
    '</div>';

// A loading image URL.
FriendlyChat.LOADING_IMAGE_URL = 'https://www.google.com/images/spin-32.gif';

// Displays a Message in the UI.
FriendlyChat.prototype.displayMessage = function(key, name, text, picUrl, imageUri) {
  var div = document.getElementById(key);
  // If an element for that message does not exists yet we create it.
  if (!div) {
    var container = document.createElement('div');
    container.innerHTML = FriendlyChat.MESSAGE_TEMPLATE;
    div = container.firstChild;
    div.setAttribute('id', key);
    this.messageList.appendChild(div);
  }
  if (picUrl) {
    div.querySelector('.pic').style.backgroundImage = 'url('   picUrl   ')';
  }
  div.querySelector('.delete').setAttribute('id', key);
  div.querySelector('.name').textContent = name;
  var messageElement = div.querySelector('.message');
  if (text) { // If the message is text.
    messageElement.textContent = text;
    // Replace all line breaks by <br>.
    messageElement.innerHTML = messageElement.innerHTML.replace(/n/g, '<br>');
  } else if (imageUri) { // If the message is an image.
    var image = document.createElement('img');
    image.addEventListener('load', function() {
      this.messageList.scrollTop = this.messageList.scrollHeight;
    }.bind(this));
    this.setImageUrl(imageUri, image);
    messageElement.innerHTML = '';
    messageElement.appendChild(image);
  }
  // Show the card fading-in.
  setTimeout(function() {div.classList.add('visible')}, 1);
  this.messageList.scrollTop = this.messageList.scrollHeight;
  this.messageInput.focus();
};

FriendlyChat.prototype.deleteMessage = function(key) {
  this.deleteRef = this.database.ref('notifications');
document.getElementById(key).onclick = function() {
      if (confirm("Are you sure you want to delete this notification?") == true) {
        alert("Removed: "   key);
        this.deleteRef.child(key).remove();
      } else {
        alert("Canceled");
      }
}
};
  

Вот мои loadMessages:

     FriendlyChat.prototype.loadMessages = function() {
  // Reference to the /messages/ database path.
  this.messagesRef = this.database.ref('notifications');
  // Make sure we remove all previous listeners.
  this.messagesRef.off();

  // Loads the last 12 messages and listen for new ones.
  var setMessage = function(data) {
    var val = data.val();
    this.displayMessage(data.key, val.description, val.title, val.photoUrl, val.imageUrl);
    this.deleteMessage(data.key);
  }.bind(this);
  this.messagesRef.limitToLast(12).on('child_added', setMessage);
  this.messagesRef.limitToLast(12).on('child_changed', setMessage);
  this.messagesRef.limitToLast(12).on('child_removed', setMessage);
};
  

Я застрял на некоторое время. Я надеюсь, что кто-нибудь может объяснить или помочь!

Спасибо!

Итак, я понял это! Оказывается, моя ссылка на firebase работала неправильно. Вот обновленный код:

 FriendlyChat.prototype.deleteMessage = function(key) {
  //this.deleteRef = this.database.ref('notifications');
document.getElementById(key).onclick = function() {
      if (confirm("Are you sure you want to delete this notification?") == true) {
        alert("Removed: "   key);
        firebase.database().ref('notifications').child(key).remove();
      } else {
        alert("Canceled");
      }
}
};