jQuery empty()/remove() makes page jump

I have a monitoring website which shows "who is logged in" and their "state" (online/away/etc.).

They are basically wrapped near the bottom of my page with:

<table cellpadding="0" cellspacing="0" id="telecaster_agentenstatus" class="telecaster">
      开发者_JAVA技巧      <tr>
                <td id="free_agents">
                </td>
                <td id="acw_agents">
                </td>
                <td id="pause_agents">
                </td>
            </tr>
            <tr id="telecaster_agentenstatus_start">
                <td id="agentenstatuus" colspan="3">
                    <div class="agent_telecaster_container"></div>
                </td>
            </tr>
        </table>

So all "agents" get into the div with the class "agent_telecaster_container". I append as many divs as I need with:

for (nameAgent in supervisionagents.group[0].agent) {
            //$("#agentenstatuus").append('<div class="agent_telecaster">'+nameAgent+'</div>'); 
            counter++;

            if (supervisionagents.group[0].agent[nameAgent].stateCurrent.description == "idle") 
            {
                $(".agent_telecaster_container").append('<div id="agent'+counter+'" class="agent_telecaster"><img src="images/icons/box_green_12x12.png">&nbsp;' + nameAgent + '</div>');
            }

Which gets called over and over again.

What I need is to "clear" the with its content because it can be that every second someone gets offline or online.

So far this can be possible with a simple:

$('.agent_telecaster_container').empty() / .remove();

But what then happens is that if I move my view / scrollbar to view some things underneath that table, with every reload (every sec.) it jumps back to this . I guess this happens because of the remove / empty and this element gets deleted but new content gets in.

Has anybody any idea on how to prevent the jumping? :/

Have you tried hiding the element first, and then removing it? .hide().remove(); Or try a fadeOut() then call remove() in the callback:

.fadeOut('fast',function( $('.agent_telecaster_container').remove(); ));

You can make your main container for contacts fixed by height and add wertical scrollbar. Then nothing jumps.

This works fine :-)

$('#agentenstatuus').css('height',$('.agent_telecaster_container').height());

at the end of every loop :-) This sets the table's cell to the height of the div container and no jump arounds come up!

My before edited mistake was because of a CSS mistake in my .css file.