Удаление элементов-флажков в списке дел

1

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

function onReady() {
  const addToDoForm = document.getElementById('addToDoForm');
  const newToDoText = document.getElementById('newToDoText');
  const toDoList = document.getElementById('toDoList');

  addToDoForm.addEventListener('submit', event => {
    event.preventDefault();

    let title = newToDoText.value;
    let newLi = document.createElement('li');
    let checkbox = document.createElement('input');
    checkbox.type = "checkbox";
    newLi.textContent = title;
    newLi.appendChild(checkbox);
    toDoList.appendChild(newLi);
    newToDoText.value = '';
  });
}

window.onload = function() {
  alert("The window has loaded!");
  onReady();
};
<form id="addToDoForm">
  <label for="newToDoText">New To-Do:</label>
  <input type="text" id="newToDoText">
  <button type="submit">Add To-Do!</button>
</form>

<ul id="toDoList">

</ul>

<script src="app.js"></script>
  • 0
    "Есть идеи?" - Вопросы, основанные на мнении, являются не по теме для StackOverflow. В любом случае, в показанном коде вы демонстрируете технику для создания вложенных элементов и связывания обработчиков событий, поэтому используйте версию этого для создания кнопки с обработчиком щелчка ...
Теги:

1 ответ

0
Лучший ответ

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

function onReady() {
  const addToDoForm = document.getElementById('addToDoForm');
  const newToDoText = document.getElementById('newToDoText');
  const toDoList = document.getElementById('toDoList');

  function onDelete(e) {
    e.target.parentElement.outerHTML = "";
  }

  addToDoForm.addEventListener('submit', event => {
    event.preventDefault();

    let title = newToDoText.value;
    let newLi = document.createElement('li');
    let checkbox = document.createElement('input');
    let del = document.createElement('button');
    del.textContent = "delete";
    del.onclick = onDelete;
    checkbox.type = "checkbox";
    newLi.textContent = title;
    newLi.appendChild(checkbox);
    newLi.appendChild(del);
    toDoList.appendChild(newLi);
    newToDoText.value = '';
  });
}

window.onload = function() {
  alert("The window has loaded!");
  onReady();
};
  • 0
    e.target.parentElement.outerHTML = ""; -> e.target.parentElement.remove();
  • 0
    Спасибо за вашу помощь! Это сработало потрясающе, и когда я попытался сделать это сам, я просто подумал об этом. Это сделало это намного более ясным для меня.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню