Как удалить div 2-го родителя div'a в котором Checkbox?

Question

[Him4enko]

Как удалить первоначальный div, с id parent когда выбран Checkbox

<div class="col" id="parent" style="width: 150px;height: 170px;">
            <div class="card">
                <div class="card-body text-center"><input type="checkbox" id="delete-checkbox" name="check[]" style="margin-left: -110px; width: 20px;height: 20px;" value="'.$book[$i][0].'">
                    <h4 class="card-title">'.$book[$i][1].'</h4>
                    <h4 class="card-title">'.$book[$i][2].'</h4>
                    <h4 class="card-title">'.$book[$i][3].' $</h4>
                    <h4 class="card-title">Weight: '.$book[$i][9].'KG</h4>
                    </div>
                </div>
            </div>

Вот мой код

$("#form").submit(function (e) {
$("#parent input:checked").parent().remove();
});

Но удаляется блок с классом card, а нужно с классом col

Answer 1

[nonconformiste]

$("#form").submit(function (e) {
$("#parent input:checked").closest('класс или id родителя').remove();
});

Answer 2

[Антон Шаманов]

.parent() - на 1 ур выше т.е. твой код удаляет .card-body, а не .card
.parents() - на несколько уровней выше т.е. должно быть что-то вроде

$("#parent input:checked").parents('.col').remove();

.