как удалить выбранный элемент списка, вместо удаления только верхнего тега li

Question

Я пытаюсь удалить определенные элементы li, на основе которых нажимается кнопка x.В настоящее время у меня возникает ошибка

"bZMQWNZvyQeA: 42 Uncaught TypeError: Не удалось выполнить 'removeChild' на 'Node': параметр 1 не относится к типу 'Node'."

ЯЯ знаю, что это может означать, что параметр не имеет значения, но это не имеет никакого смысла для меня.Инструменты разработчика Chrome показывают, что атрибут onClick правильно выполняет функцию removeItem и передает idName в качестве параметра.Как это не работает?

var note = 0;

function saveInfo() {
  var idName = "note" + note;
  //assign text from input box to var text, and store in local storage
  var input = document.getElementById('input').value;
  var text = localStorage.setItem(note, input);
  var list = document.createElement("li");
  var node = document.createTextNode(input);
  var removeBtn = document.createElement("button");

  list.setAttribute("id", idName);
  removeBtn.setAttribute("onClick", `removeItem(${idName})`);
  removeBtn.innerHTML = "X";
  list.appendChild(node);
  list.appendChild(removeBtn);
  document.getElementById("output").appendChild(list);

  note += 1;
}

function removeItem(name) {
  var parent = document.getElementById("output");
  var child = document.getElementById(name);
  parent.removeChild(child);
}

Answer 1

В своем комментарии я предложил вам прослушать всплывающее событие клика из removeBtn.В этом случае все, что вам нужно, это удалить логику присвоения атрибута onclick из вашего кода и вместо этого дать вашему removeButton идентифицируемое свойство, такое как класс.Давайте присвоим ему класс delete-button:

var removeBtn = document.createElement("button");
removeBtn.classList.add('delete-button');
removeBtn.type = 'button';
removeBtn.innerHTML = 'X';

Затем вы можете прослушать событие щелчка на уровне #output, которое гарантированно будет присутствовать во время выполнения.Когда событие вызывается, вы просто проверяете, имеет ли цель события идентифицируемое свойство, например, класс remove-button в нашем случае:

output.addEventListener('click', function(e) {

  // GUARD: Do nothing if click event does not originate from delete button
  if (!e.target.matches('.remove-button')) {
    return;
  }

  // Delete parent node
  e.target.closest('li').remove();
});

Если событие click не возникло из кнопки удаления, мыпросто return и больше ничего не делай.В противном случае мы знаем, что кнопка была нажата, и мы можем затем использовать Element.closest(), то есть .closest('li'), чтобы извлечь ближайший <li> родительский узел и удалить его.

Есливам абсолютно необходимо поддерживать IE11 (который, в свою очередь, не поддерживает Element.closest()), вы также можете использовать Node.parentNode для доступа и удаления элемента <li>, предполагая, что ваша кнопка удаления является прямойпотомок элемента <li>:

// Delete parent node
e.target.parentNode.remove();

См. подтверждение концепции ниже:

var rows = 10;
var output = document.getElementById('output');

for (var i = 0; i < rows; i++) {
  var list = document.createElement('li');
  var node = document.createTextNode('Testing. Row #' + i);
  var removeBtn = document.createElement("button");
  removeBtn.classList.add('remove-button');
  removeBtn.type = 'button';
  removeBtn.innerHTML = 'X';
  
  list.appendChild(node);
  list.appendChild(removeBtn);
  
  output.appendChild(list);
}

output.addEventListener('click', function(e) {

  // GUARD: Do nothing if click event does not originate from delete button
  if (!e.target.matches('.remove-button')) {
    return;
  }
  
  e.target.closest('li').remove();
});

<ul id="output"></ul>

Answer 2

Проблема в том, что у вас пропущены кавычки вокруг идентификатора, который вы передаете removeItem:

removeBtn.setAttribute("onClick", `removeItem(${idName})`);

Это должно быть:

removeBtn.setAttribute("onClick", `removeItem('${idName}')`);

Лучший шаблон

Рекомендуется связывать обработчик щелчков, не полагаясь на строковую оценку кода и не создавая динамические значения атрибута id:

removeBtn.addEventListener("click", () => removeItem(list));

И тогда функция removeItem должна ожидать самого узла, а не id:

function removeItem(child) {
  child.parentNode.removeChild(child);
}

Вы можете удалить следующий код:

var idName = "note" + note;
list.setAttribute("id", idName);