Удаление отмеченных флажков с помощью функции

Question

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

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

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

В вашем коде есть несколько проблем:

1. Вы перерабатываете #checkBox ID. Помните, что идентификаторы должны быть уникальными в документе. Поэтому вы должны генерировать уникальный идентификатор для каждой пары метка + флажок
2. Вы удаляете только элемент флажка, а не текст метки, поэтому даже если ваша логика работает, внешний вид / результат вашего кода нечто вы хотите.

Решением будет , заключающий текст вашей метки и элемент флажка внутри метки . Преимущества этого состоят в том, что:

• Элемент <label> не нуждается в атрибуте for, так как нажатие на метку автоматически установит вложенный флажок
• Вы можете использовать.closest('label') чтобы удалить всю пару текста + флажок метки, когда вы нажмете кнопку удаления

Чтобы перебрать все отмеченные флажки, вы можете просто запустить этот селектор: document.querySelector('.checkbox:checked'). Чтобы перебрать эту коллекцию узлов, вы можете использовать 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 2

Я думаю, что вы должны реструктурировать свой HTML. Создайте отдельную функцию createItem(), которая возвращает <div>, содержащую <input> и текст. Дайте конкретный className контейнеру div.

Внутри remove() вам querySelectorAll(), чтобы получить все предметы. И используйте forEach() для циклического прохождения элементов и проверки, проверяется ли ввод элемента, тогда remove() it

Примечание: 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 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>