Установите флажок, чтобы исчезнуть в DOM - PullRequest
Новая
       23

Установите флажок, чтобы исчезнуть в DOM

0 голосов
/ 04 марта 2019 

function checkboxAd() {
  let boxes = document.getElementById("inputPomo").value;
  let numBox = parseInt(boxes, 10);
  let boxAdd = document.createElement("li");
  let ulBox = document.getElementById("listPomo");
  for (let i = 0; i < numBox; i++) {
    let boxAdd = document.createElement("INPUT");
    boxAdd.setAttribute("type", "checkbox");
    ulBox.appendChild(boxAdd);
  }
}
<div>
  <input id="inputTodo" placeholder="What needs to be done?" />
  <input id="inputPomo" placeholder="How many Pomodoros?" />
  <ul id="listTodo"></ul>
  <ul id="listPomo"></ul>
  <button id="tasker">Save Task</button>
</div>

Я хочу, чтобы флажок исчезал при проверке с помощью JavaScript.Проблема заключается в том, что флажки (и) генерируются динамически с помощью функции checkboxAd(): 

function checkboxAd() {
  let boxes = document.getElementById("inputPomo").value;
  let numBox = parseInt(boxes, 10);
  let boxAdd = document.createElement("li");
  let ulBox = document.getElementById("listPomo");
  for (let i = 0; i < numBox; i++) {
    let boxAdd = document.createElement("INPUT");
    boxAdd.setAttribute("type", "checkbox");
    ulBox.appendChild(boxAdd);
  }
}

Вышеуказанная функция срабатывает, когда число вводится в поле ввода с помощью ID="inputPomo".Количество флажков отображается в зависимости от введенного числа.

Когда определенное задание выполнено, я хочу установить флажок, чтобы флажок исчез.

Все примеры, которые я нахожу, имеют дело с ситуациями, когда флажок установлен в HTML.Но в этом случае флажки генерируются JS. Извините за неправильное использование терминологии, помощь приветствуется.

HTML-часть, где появляется родительский флажок id="listPomo"

<div>
      <input id="inputTodo" placeholder="What needs to be done?" />
      <input id="inputPomo" placeholder="How many Pomodoros?" />
      <ul id="listTodo"></ul>
      <ul id="listPomo"></ul>
      <button id="tasker">Save Task</button>
</div>

Не знаюзнаете, как я размещаю eventlistener для события onchange (?), которое генерируется JS.Только определенный отмеченный флажок должен исчезнуть.(Так что если есть три флажка, два должны остаться…)

1 Ответ

0 голосов
/ 04 марта 2019

если вы хотите добавить событие в сгенерированный HTML-элемент, вы можете использовать это 

element.addEventListener("click", () => {

});

Для ваших нужд: 

function checkboxAd() {
  let boxes = document.getElementById("inputPomo").value;
  let numBox = parseInt(boxes, 10);
  let boxAdd = document.createElement("li");
  let ulBox = document.getElementById("listPomo");
  for (let i = 0; i < numBox; i++) {
    let boxAdd = document.createElement("INPUT");
    boxAdd.setAttribute("type", "checkbox");
    boxAdd.addEventListener("change", () => {
     // DO what you want here
    });
    ulBox.appendChild(boxAdd);
  }
}
...