Question

尝试使用JavaScript列出待办事项，但似乎无法找出删除选中复选框的方法。

我试图让程序更改ID，然后删除具有该新ID的所有内容，但这似乎不起作用，也许我不确定一些重要的不确定事项，但是如果你们中的任何人知道删除复选框的其他方法，非常感谢您的帮助。

function add() {
   var myDiv = document.getElementById("myDiv");

   var inputValue = document.getElementById("myInput").value;


   // creating checkbox element 
   var checkbox = document.createElement('input');



   if (inputValue === '') {
      alert("Input is Empty!");
   } else {
      document.getElementById("myUL").appendChild(checkbox);
   }

   // Assigning the attributes to created checkbox 
   checkbox.type = "checkbox";
   checkbox.name = "name";
   checkbox.value = "value";
   checkbox.id = "checkBox";

   // create label for checkbox 
   var label = document.createElement('label');

   // assigning attributes for the created label tag  
   label.htmlFor = "checkBox";

   // appending the created text to the created label tag   
   label.appendChild(document.createTextNode(inputValue));

   // appending the checkbox and label to div 
   myDiv.appendChild(checkbox);
   myDiv.appendChild(label);

}

function remove() {
   var doc = document.getElementById("checkBox").checked;
   doc.remove;
}

  <h1>To Do List</h1>

  <input type="text" id="myInput">

  <button onclick='add()'>Click me!</button>
  <button onclick="remove()">Delete</button>

  <ul id="myUL">
     <div id="myDiv"></div>
  </ul>

Answer 1

我认为您应该重组HTML。创建一个单独的函数createItem() 返回包含<div>和文本的<input>。将特定的className赋予容器div。

在remove()内部querySelectorAll()中获取所有物品。然后使用forEach()遍历项目，并检查是否检查了项目的输入，然后remove()进行了检查

注意： id在整个文档中的元素应该是唯一的

function createItem(text){
  const container = document.createElement('div');
  container.className = 'item'
  container.innerHTML = `<input type="checkbox" /><span>${text}</span>`
  return container;
}

function add() {
   var myDiv = document.getElementById("myDiv");

   var inputValue = document.getElementById("myInput").value;

   // creating checkbox element 
   var checkbox = document.createElement('input');
   if (inputValue === '') {
      alert("Input is Empty!");
   } else {
      document.getElementById("myUL").appendChild(createItem(inputValue));
   }
}

function remove() {
   var doc = document.querySelectorAll('.item');
   doc.forEach(x => {
    if(x.querySelector('input').checked){
      x.remove()
    }
   })
}

<h1>To Do List</h1>

  <input type="text" id="myInput">

  <button onclick='add()'>Click me!</button>
  <button onclick="remove()">Delete</button>

  <ul id="myUL">
     <div id="myDiv"></div>
  </ul>

Answer 2

您的代码有几个问题：

您正在回收#checkBox ID。请记住，ID在文档中必须唯一。因此，您应该为每个标签+复选框对生成唯一的ID
您仅删除复选框元素，而不是标签文本，因此即使您的逻辑可行，代码的外观/结果也不是您想要的。

一种解决方案是包装标签文本和标签内的复选框元素。这样做的好处是：

<label>元素不需要for属性，因为单击标签将自动选中嵌套的复选框
点击删除按钮时，您可以使用.closest('label')删除整个标签文本+复选框对

要遍历所有选中的复选框，只需运行以下选择器即可：document.querySelector('.checkbox:checked')。要遍历此Node集合，可以使用Array.prototype.forEach()。

另一注：如果用户要添加文本框时提供了空白文本，则可能要从功能返回。

请参见下面的概念验证示例：

function add() {
   var myDiv = document.getElementById("myDiv");

   var inputValue = document.getElementById("myInput").value;


   // creating checkbox element 
   var checkbox = document.createElement('input');

   if (inputValue === '') {
      alert("Input is Empty!");
      return;
   } else {
      document.getElementById("myUL").appendChild(checkbox);
   }

   // Assigning the attributes to created checkbox 
   checkbox.type = "checkbox";
   checkbox.name = "name";
   checkbox.value = "value";
   checkbox.classList.add("checkbox");

   // create label for checkbox 
   var label = document.createElement('label');
   
   // appending the checkbox and created text to the created label tag   
   label.appendChild(checkbox);
   label.appendChild(document.createTextNode(inputValue));
   
   // appending label to div
   myDiv.appendChild(label);

}

function remove() {
   const checkboxes = document.querySelectorAll('.checkbox:checked');
   Array.prototype.forEach.call(checkboxes, function(checkbox) {
    checkbox.closest('label').remove();
   });
}

<h1>To Do List</h1>

  <input type="text" id="myInput">

  <button onclick='add()'>Click me!</button>
  <button onclick="remove()">Delete</button>

  <ul id="myUL">
     <div id="myDiv"></div>
  </ul>

Answer 3

使用查询：

function removeCheckedCheckboxes() {
    const query = document.querySelectorAll('[type="checkbox"]:checked');
    
    Array.from(query).forEach(element =>
        element.remove()
    );
}

<html>
<body>
  <span style="background: red; display: inline-block">
    <input type="checkbox">
  </span>
  <br>
  
  <span style="background: orange; display: inline-block">
    <input type="checkbox">
  </span>
  <br>
  
  <span style="background: yellow; display: inline-block">
    <input type="checkbox">
  </span>  
  <br>
  
  <span style="background: green; display: inline-block">
    <input type="checkbox">
  </span>
  <br>
  
  <span style="background: blue; display: inline-block">
    <input type="checkbox">
  </span>
  <br>
 
  <span style="background: purple; display: inline-block">
    <input type="checkbox">
  </span> 
  <br>
  
  <br>
  
  <button onclick="removeCheckedCheckboxes()">
    Remove checked checkboxes
  </button>
</body>
</html>

使用功能删除选中的复选框元素

3 个答案: