JQuery fadeout leaves a little space

Question

I use current jQuery to hide the div notification disappearing and then delete it, however, when it completes, there is an odd space around the height  - this means that subsequent forms and page elements until a notification appears.

Recall: fading and deletion work fine, but I would like the space to stay and disappear. This is a trifle, but it bothers me.

jQuery:

// Fade out any success divs.
$(".success").fadeOut(6000, function(){
    $(".success").remove();
});

The notation div is written by PHP in postback and has the following CSS:

.success {
    background-color: #b3ffb2;
    border: 1px solid green;
}

.box {
    margin: 5px;
    padding: 5px;
}

Div is very simple:

<div class="success box"><p><strong>Success!</strong><br />Done!</p></div>

Edit: the surrounding page layout is as follows:

<div id="wrapper">

    <div id="navigation">
        <ul> ... </ul>
    </div>

    <div id="container">
        <div class="success box">
            <p><strong>Sucess!</strong><br />
            Done</p>
        </div>
        // more content
    </div>

</div>

Edit: Using Firebug in FF 3.5.2, I do not see anything that remains after using the inspector. There's just a weird gap. I also took a screenshot of this phenomenon:

Answer 1

, , #container, // more content. $.remove() DOM , , , ( ), , , .success.

Answer 2

() ?

Answer 3

I decided that under my notification was a tag <br>that was still there after the disappearance.

So, to hide the first element after the div, I changed my jquery to:

$(".success").fadeOut(6000, function(){
    $(".success + br").remove();
});

Which removes the next element in dom after the selector. From jQuery Manual .