删除上面的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上方的checkbox 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元素上方的dad div元素？

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();
});

Demonstration

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
});