jQuery - Navigating the Dom with Div's

Question

I'm not sure how to accomplish this. I'm moving from a very static method of doing things to a more dynamic thing my HTML looks like this:

<div id="q2">
    <div class="small">What is your Email Address?<br>
        <span class="smallnotice">Please enter a valid email address.</span></div>
    <div class="notice">That is an invalid email address.<br><br></div><input type="text" name="email" id="email" data-format="email|32" value="email@domain.com" tabindex="2" autocomplete="off" class="formidle" style="width: 280px; ">
</div>

The q2 div ID is dynamic so the Email address could be in q3, q4 etc.

What I'm attempting to accomplish in jQuery is to remove the class="notice" element when the user begins typing.

When I was doing it statically my element was q5 and I was able to remove that element by doing the following: (THIS WORKS)

$($('#q5 > div')[1]).remove();

But now I can't seem to figure out how to remove that element knowing that I don't know what "q" we're in.

Just so you know how it's being called:

$("input[type='text']").keydown(function(e){
   $("input[type='text']").each( function() {
        if( $(this).hasClass("formerror") )
        {
            $(this)
                .removeClass("formerror formidle")
                .addClass("formfocused");
            $( $('#q5 > div')[1]).remove();
        }

So I just need a way to remove that div any help would be appreciated.

Answer 1

I think you just want siblings():

$("input[type='text']").keydown(function(e){
    $(this).siblings("div.notice").remove();
});

Test is here: http://jsfiddle.net/fRTn2/

Answer 2

try:

$(this).closest('div').find('.notice').remove();