选中复选框以在 DOM 中消失

Question

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>

我不知道，我是如何为 JS 生成的 onchange (?) 事件放置事件监听器的。只有某个选中的复选框应该消失。（所以如果有三个复选框，应该保留两个……）

Answer 1

如果您想将事件添加到生成的 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);
  }
}

选中复选框以在 DOM 中消失

Check checkbox to vanish in the DOM

javascript

checkbox

dom-traversal