JS - Not accessing classes by their class name

I am working on a to-do list app with firebase, but the code that is supposed to access all element by the class name of 'close' will not access any. If I console log it, it just returns: {};

I am using a for loop to add an onclick event, but it cannot add it to all of the elements if the arry is emtpy.

var config = {
  apiKey: "AIzaSyBIV0dPpIwuZadvGfmkIPF7gsykIvt8n4M",
  authDomain: "to-do-332c9.firebaseapp.com",
  databaseURL: "http://ift.tt/2wSZFa5",
  projectId: "to-do-332c9",
  storageBucket: "to-do-332c9.appspot.com",
  messagingSenderId: "281739919235"
};
firebase.initializeApp(config);

const txtEmail = document.getElementById('txtEmail');
const txtPassword = document.getElementById('txtPassword');
const btnLogin = document.getElementById('btnLogin');
const btnSignup = document.getElementById('btnSignup');
const btnLogout = document.getElementById('btnLogout');
const addTodo = document.getElementById('addTodo');

var todoRef;

btnLogin.addEventListener('click', e => {  
  document.getElementById('form').classList.add('hide');    

  const email = txtEmail.value;
  const pass = txtPassword.value;
  const auth = firebase.auth();

  const promise = auth.signInWithEmailAndPassword(email, pass);
  promise.catch(e => console.log(e.message));
  
});

btnSignup.addEventListener('click', e => {
  const email = txtEmail.value;
  const pass = txtPassword.value;
  const auth = firebase.auth();

  const promise = auth.createUserWithEmailAndPassword(email, pass);
  promise.catch(e => console.log(e.message));

});

btnLogout.addEventListener('click', e => {
  firebase.auth().signOut();
});

firebase.auth().onAuthStateChanged(firebaseUser => {
  if (firebaseUser) {
    btnLogout.classList.remove('hide');
    document.getElementById('form').classList.add('hide');
    document.getElementById('todo').classList.remove('hide');
    todoRef = firebase.database().ref(firebaseUser.uid);
    displayTodos();
  } else {
    btnLogout.classList.add('hide');
    document.getElementById('todo').classList.add('hide');
  }
});

addTodo.addEventListener('click', () => {
  var todo = document.getElementById('todoInput').value;
  saveTodo(todo);
});
/* window.onbeforeunload = function (e) {
  var e = e || window.event;

  if (e) {
    firebase.auth().signOut();
  }

  return firebase.auth().signOut();;
}; */


function saveTodo(todo){
  var newTodoRef = todoRef.push();
  newTodoRef.set({
    todo: todo
  });
} 

function displayTodos() {
  todoRef.on('value', gotData, errData);
} 

var k;

function gotData(data) {
  var todos = data.val();
  var keys = Object.keys(todos);
  var todoList = document.getElementById('todoList');    
  todoList.innerHTML = "";
  for (var i=0; i<keys.length; i++){
    k = keys[i];
    var todo = todos[k].todo;
    todoList.innerHTML += "<li id='"+keys[i]+"'>"+todo+"<button id="+keys[i]+" class='close' style='margin-left='50px'>Delete</button></li>";
    
    
    
  }
}

var close = document.getElementsByClassName('close');
console.log(close);
for (var i = 0; i < close.length; i++) {
  var id = close[i].id;
  close[i].onclick = function() {
    var div = this.parentElement;
    todoRef.child(id).remove()
  }
}

function errData(err) {
  console.log('Error!');
  console.log(err);
}