Как я могу получить данные от элемента, нажав на него? javascript только

Question

Я пытаюсь удалить элемент из массива, поэтому я думал сначала получить идентификатор элемента, чтобы я мог знать, какой индекс удалить. У меня есть этот код из приложения todo:

// Generate a todo
const generateTodo = function () {
    todoTemplate = '<li id="%id%">%todo% <span onclick="removeTodo()" class="close">x</span></li>'
    newTodo = todoTemplate.replace('%todo%', filters.searchText)
    newTodo = newTodo.replace('%id%', todos.length)
    document.querySelector('.todos').insertAdjacentHTML('beforeend', newTodo)
    document.querySelector('.add-todo').value = ''

    // adding the todo to the array
    todos.push(newTodo)

}

Мой вопрос: как я могу вернуть идентификатор из "li", который я нажимаю

Answer 1

Вместо создания динамических c идентификаторов (которые являются запахом кода) и вместо использования встроенных обработчиков (у которых слишком много проблем, чтобы стоить использовать ), рассмотрите возможность создания элемента с createElement вместо этого - тогда вы можете правильно подключить к нему прослушиватель событий, используя Javascript:

const generateTodo = function() {
  const li = document.querySelector('.todos').appendChild(document.createElement('li'));
  li.textContent = filters.searchText + ' ';
  const span = li.appendChild(document.createElement('span'));
  span.textContent = 'x';
  span.className = 'close';
  span.onclick = () => li.remove();
  document.querySelector('.add-todo').value = ''
  todos.push(filters.searchText);
}