Блог

Главная - Вопросы по программированию - Как я могу удалить элементы из списка в JavaScript, щелкнув?

Как я могу удалить элементы из списка в JavaScript, щелкнув?

#javascript

#javascript

Вопрос:

Я пытаюсь составить список покупок и хочу, чтобы отдельные элементы добавлялись и также удалялись. Как это можно сделать?

 function getValue() {
  var val = document.getElementById("itemList").value;
  var list = document.getElementById("demo");
  var element = document.createElement("li");
  var addList = document.createTextNode(val);
  element.appendChild(addList);
  list.prepend(element);
} 
 <html>

<head>
  <title> Common List </title>
</head>

<body>
  <form>
    <input type="text" id="itemList">
    <button type="button" onclick="getValue()">add to list</button>
    <ul id="demo"></ul>
  </form>
</body>

</html>

Комментарии:

1. Добавьте прослушиватель событий к element этим вызовам this.remove()

Ответ №1:

Добавьте прослушиватель событий к элементу при его добавлении. Это может использовать remove() метод для удаления его из списка.

 function getValue() {
  var val = document.getElementById("itemList").value;
  var list = document.getElementById("demo");
  var element = document.createElement("li");
  var addList = document.createTextNode(val);
  element.appendChild(addList);
  element.addEventListener("click", function() {
    if (confirm(`Do you really want to remove ${this.innerText}`)) {
      this.remove();
    }
  });
  list.prepend(element);
} 
 <html>

<head>
  <title> Common List </title>
</head>

<body>
  <form>
    <input type="text" id="itemList">
    <button type="button" onclick="getValue()">add to list</button>
    <ul id="demo"></ul>
  </form>
</body>

</html>

Комментарии:

1. Спасибо, элементы фактически удаляются щелчком мыши.