Question

i have a template that looks something like this.

Sample Template

<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>

I want to remove (or hide) the form-field div above the div that contains checkbox input if a user checks the checkbox. The HTML is rendered automatically and do not have any specific id's or classes. How do i go about doing this. will jQuery position will be of any use?

JS

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

how do i capture the form-field div element above the dad element ?

Answer 1

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

Removes the .form_field above the .form_field that contains the checkbox, if it’s checked ?