Как удалить все выделенные checkbox?

Question

[Павел]

На странице есть checkbox-ы, не могу сделать так что бы выделенные удалялись все сразу. При нажатии на кнопку удаляются то по одному, то по два. Не могу понять что не так. Код ниже

HTML

<label><input type="checkbox" onchange="box()" class="checkboxes">Alliexpress.com<br></label>
	<label><input type="checkbox" onchange="box()" class="checkboxes">Twitter.com<br></label>
	<label><input type="checkbox" onchange="box()" class="checkboxes">Vk.com<br></label>
	<label><input type="checkbox" onchange="box()" class="checkboxes"> Mail.ru<br></label>
	<button id="del">Delete</button>

JS

function box () {
var boxes = document.getElementsByClassName('checkboxes');
var labels = document.getElementsByTagName('label');
  for(var i = 0;i < boxes.length; i++) {
    if(boxes[i].checked) {
      labels[i].classList.add('active');
      labels[i].classList.remove('posive');
    } else   {
      labels[i].classList.add('posive');
      labels[i].classList.remove('active');
    }
  }
}



$('#del').click( function () {
var types = document.getElementsByClassName('active');
for(var i = 0; i < types.length;i++) {
  types[i].remove();
}
});

Answer 1

[Ragtime Kitty]

Не могу понять что не так

Ошибка в том, что document.getElementsByClassName возвращает не массив, а коллекцию нодов и перебор через i++ вам тут не поможет, потому что как только вы удаляете элемент, он пропадает и из этой коллекции. Может кто-то другой сможет это точно объяснить, я не очень умная.

Используйте цикл while:

$('#del').click( function () {
  var types = document.getElementsByClassName('active');
  while (types[0]) {
    types[0].remove();
  }
});

А вообще, у вас подключена здоровая jQuery, а вы используете ее только чтобы клик на кнопку навесить. Сделайте все тогда уж на ней:

Answer 2

[Антон Усачев]

Интересная смесь нативного js и jquery.

$('#del').click(function () {
    $('label.active').remove();
});