jquery - 删除上面的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包含输入的 div 上方的 div 。checkboxHTML 是自动呈现的，没有任何特定的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元素上方的 divdad元素？

Answer 1

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

如果选中，则删除.form_field上面.form_field包含复选框的 ?

Answer 2

你可以做

$('#form-entry input[type="checkbox"]').change(function(){
    $(this).parent().prev().remove();
});

示范

Answer 3

您可以使用以下 jQuery：

$('.form-field input[type=checkbox]').click(function() {
    $(this).parent().prev().toggle(); // parent is the checkboxs div, prev returns the previous element in the DOM
});​

Toggle每次单击复选框时将隐藏/显示前一个 div。

这是一个jsFiddle，它显示了它是如何工作的

Answer 4

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