删除上面的div

Question

我有一个看起来像这样的模板.

样本模板

<div id="form-entry">
    <h4>Some heading here</h4>
    <div class="form-field">
        <label>Some Label</label>
        <input type="text" class="some_text" />
    </div>
    <div class="form-field">
        <label>Some Label</label>
        <input type="text" class="some_text" />
    </div>
    <div class="form-field">
        <label>Some Label</label>
        <input type="text" class="some_text" />
    </div>
    <div class="form-field">
        <input type="checkbox" />
        <label>Some Label</label>
    </div>
    <div class="form-field">
        <label>Some Label</label>
        <textarea></textarea>
    </div>
</div>

如果用户选中复选框,我想删除(或隐藏)form-field包含checkbox输入的div上方的div .HTML是自动呈现的,没有任何特定的id's或classes.我该怎么做呢 请问jQuery的位置会有什么用？

JS

$('.form-field input[type=checkbox]').click( function(){
    entity = $(this);
    dad = entity.parent(); // This gets the form-field div element that contains the checkbox
}); 

我如何捕获form-field元素上方的div dad元素？

Answer 1

$('.form-field input[type=checkbox]').on('change', function(){
    if (this.checked) 
        $(this).closest('.form-field').prev().remove();
}); 

删除.form_field上面.form_field包含复选框,如果已选中？