Удалить отмеченные чекбоксы. Javascript

Question

Как решить задачу? Нужно найти все отмеченные чекбоксы и удалить их с родителем. Конструкция такая:

javascript

function remove(appendBox) { }

HTML

<a class="btn" onclick="remove('box22')" href="javascript:void(0);">Remove</a>

<div id="box22">
    <div class="unit" data-id="11">
        <input type="checkbox" id="unitObject11" name="unitObject[]" value="11">
        <label for="unitObject11">11</label>
    </div>
    <div class="unit" data-id="56">
        <input type="checkbox" id="unitObject56" name="unitObject[]" value="56">
        <label for="unitObject56">56</label>
    </div>
    <!-- etc... -->
</div>

Спасибо!!!!!

Answer 1

для того, чтобы выбрать все чекбоксы, нужен селектор

input[type="checkbox"]

Чтобы выбрать только выделенные, нужно добавить селектор :checked

input[type="checkbox"]:checked

Для выбора можно воспользоваться методом .querySelectorAll

для обращения как каждому конкретному элементу в выборке, можно использовать цикл for..of

Для получения родительского элемента служит свойство .parentNode

Чтобы удалить полученный элемент можно использовать метод .remove

Answer 2

function remove(appendBox) { 
  var items = document.getElementById(appendBox).querySelectorAll(".unit input[type='checkbox']:checked");
  items.forEach(item => item.closest('.unit').remove());
}

<a class="btn" onclick="remove('box22')" href="javascript:void(0);">Remove</a>

<div id="box22">
    <div class="unit" data-id="11">
        <input type="checkbox" id="unitObject11" name="unitObject[]" value="11">
        <label for="unitObject11">11</label>
    </div>
    <div class="unit" data-id="56">
        <input type="checkbox" id="unitObject56" name="unitObject[]" value="56">
        <label for="unitObject56">56</label>
    </div>
    <!-- etc... -->
</div>

БЛОГ НА HUSL

Удалить отмеченные чекбоксы. Javascript

Ответы (2 шт):