Question

I understand how to use the remove/hide function inside of jQuery however this becomes a little tricky for me.

I have a dropdown that has an if statement based on its selection. If the selection is 0 (which is the default) it should remove the datetime textbox’s parent div that has the classes of section and _100.

That way the whole part of that row in the form is removed. Obviously if the user selects “no” (value is 0) then it stays removed, and if they user selects “yes” then it shows that whole row so that the user can fill in the datetime the comments expire.

http://jsfiddle.net/ZMHkG

Any ideas on this?

Answer 1

I’ve made some changes to the jsFiddle you provided which does what I think you were asking for. You can find the updated version here (code below).

I used the .closest() jQuery function to get a reference to the <div> element that you want to hide in relation to the #datetime input, since it’s not the immediate parent.

Then I changed the if statement to use the === operator, which compares values without modifying the types, and changed the value being compared against to the string '0' rather than the int 0.

I removed the else if because it didn’t seem to serve any practical purpose, you only want to do something when the value is equal to '0'; if that’s not correct, you can always modify the code a bit to do that.

---

HTML:

<div class="section _100">
    <label for="comments">Allow Comments</label>
    <div>
        <select name="comments" id="comments">
            <option value="" selected="selected">Please Select An Option</option>
            <option value="0">No</option>
            <option value="1">Yes</option>
        </select>
    </div>
</div>
<div class="section _100">
    <label for="datetime">Date Comments Expire</label>
    <div>
        <input id="datetime" type="datetime" name="datetime" />
    </div>
</div>

jQuery:

var dt= $("#datetime");
var dtparent = dt.closest('div.section._100');

$('#comments').change(function(){

    if($(this).val()==='0'){
        dt.val(''); //empty value
        dt.prop('disabled', true);
        dtparent.hide();
    }
    else{        
        dtparent.show();
        dt.removeAttr('disabled');                    
        dt.attr('validation','true');
    }    
});