How to select the direct parent of an element in jquery
<p>I'm having a hard time selecting the direct parent div of an input element in jquery, here's what I've tried so far, I've also included the output I got from each one when I tried to press enter on the text box with the placeholder of bunso:</p>

<pre><code>&lt;script src="jq.js"&gt;&lt;/script&gt;
&lt;script&gt;
$(function(){
    $('#grand_lolo').keypress(function(e){
        var box = $(this).parents('div').attr('id'); //undefined
        var box2 = $(this).parent().closest('div').attr('id'); //undefined
        var box3 = $(this).parent().attr('id'); //(an empty string)
        var box4 = $(this).find("div:first").attr("id"); //lolo
        var box5 = $(this).find("div").attr("id"); //lolo
        var box6 = $(this).find("div:last").attr("id"); //apo
        var box7 = $(this).closest('div').attr('id'); //grand_lolo
        console.log(box);
        console.log(box2);
        console.log(box3);
        console.log(box4);
        console.log(box5);
        console.log(box6);

        console.log(box7);
    });


});
&lt;/script&gt;
&lt;div id="grand_lolo"&gt;
    &lt;input type="text" placeholder="grand_lolo"/&gt;
    &lt;div id="lolo"&gt;
        &lt;input type="text" placeholder="lolo"/&gt;
        &lt;div id="mama"&gt;
            &lt;input type="text" placeholder="mama"/&gt;
            &lt;div id="ate"&gt;
                &lt;input type="text" placeholder="ate"/&gt;
            &lt;/div&gt;&lt;!--end of ate--&gt;

            &lt;div id="bunso"&gt;
                &lt;input type="text" placeholder="bunso"/&gt;
            &lt;/div&gt;&lt;!--end of bunso--&gt;
        &lt;/div&gt;&lt;!--end of mama--&gt;

        &lt;div id="papa"&gt;
            &lt;input type="text" placeholder="papa"/&gt;
            &lt;div id="kuya"&gt;
                &lt;input type="text" placeholder="kuya"/&gt;

                &lt;div id="apo"&gt;
                    &lt;input type="text" placeholder="apo"/&gt;
                &lt;/div&gt;&lt;!--end of apo--&gt;
            &lt;/div&gt;&lt;!--end of kuya--&gt;
        &lt;/div&gt;&lt;!--end of papa--&gt;
    &lt;/div&gt;&lt;!--end of lolo--&gt;
&lt;/div&gt;&lt;!--end of grand_lolo--&gt;
</code></pre>

<p>As you can see the correct output should be the id of the div directly enclosing the input element. </p>
