Javascript localalstorage портит другой код

Question

У меня есть список задач в javascript и я решил использовать localalstorage для сохранения списков. Дело в том, что отдельные кнопки удаления элементов списка теперь не работают, не нажимая кнопку и не нажимая кнопку ввода. Это происходит только на Chrome и Safari. В Firefox все работает нормально, поэтому я не уверен, в чем проблема на самом деле, и это моя первая попытка использовать localalstorage.

Вот вся база кода, так как я не совсем уверен, какая часть может быть причиной проблемы.

var input = document.querySelector('input[name=todoItem]'),
btnAdd = document.querySelector('button[name=add]'),
btnClear = document.querySelector('button[name=clear]'),
btnSave = document.querySelector('button[name=save]'),
list = document.querySelector('.todo'),
storeList = [];

  list.innerHTML = window.localStorage.getItem('list');

function renderTodos(){
  //Cached array length for use in for loop
  var listLength = storeList.length,
  //Created list item and button 
  el = document.createElement('li'),
  x = document.createElement('button');

  //Set text for remove button
  x.setAttribute('class', 'remove');
  x.innerHTML = '<i class="fa fa-trash-o fa-2x"></i>';

  //Loop for adding items to array and appending items to list
  for(var i = 0; i < listLength; i++){
    el.innerHTML = storeList[i];
    list.appendChild(el);
    el.appendChild(x);
  }

  //Clear out and put focus back in input box
  input.value =  '';
  input.focus();
}

//Add todo item to list
function addTodos(e){
  //Check to see that input isn't empty or only spaces with no characters
  // and add todo item if add button is clicked or enter key is pushed
  if(input.value.trim() !== '' && (e.which ===13 || e.which ===1)){
    storeList.push(input.value);
    renderTodos();
  }
  else if(input.value.trim() === '' && (e.which ===1 || e.which === 13)){
    alert('Please Enter A Valid Item!');
    input.focus();
  }
}

function removeItem(e){
  var node = e.target;
  var attr = node.getAttribute('class');
  if(attr === 'remove'){
    node = node.parentNode;
    node.parentNode.removeChild(node);
  }
}
//Clear the whole list
function clearList(){
  // make list empty
  list.innerHTML = '';
  storeList.splice(0, storeList.length);
  renderTodos();
}

//Initialize listeners and show saved list from local storage on page load
function init(){
  btnSave.addEventListener('click', function(){
    window.localStorage.setItem('list', list.innerHTML);
  });
  list.addEventListener('click', removeItem);
  btnAdd.addEventListener('click', addTodos);
  btnClear.addEventListener('click', clearList);
  input.addEventListener('keydown', addTodos);
}
window.onload = init;

Все работает, кроме кнопок со значком корзины, которые работают только при нажатии, а затем при нажатии клавиши ввода.

Answer 1

По какой-то причине Firefox делал цель клика <i> тег в то время как цель клика Chrome и Safari была <button> тег. Я сделал исправление с условием для каждой цели на основе несоответствия браузера.

<button><i></i></button>