I'm removing an element using remove() (it's a <li> with display: inline; set, although the same problem seems to exist with display: block;), and while the element is removed from the page the space it was occupying isn't.

Is this standard behaviour and so should I be using another method instead? The <li> contains a form field, so I'm wanting to ideally not have this form field sent through to the server - hence using remove() instead of hide().

I'm removing an element using remove() (it's a <li> with display: inline; set, although the same problem seems to exist with display: block;), and while the element is removed from the page the space it was occupying isn't.

Is this standard behaviour and so should I be using another method instead? The <li> contains a form field, so I'm wanting to ideally not have this form field sent through to the server - hence using remove() instead of hide().

• javascript
• jquery

Share Improve this question Follow asked Oct 19, 2009 at 13:29 James InmanJames Inman 1,01244 gold badges1717 silver badges3232 bronze badges 4

• Can you show an example? – SLaks Commented Oct 19, 2009 at 13:31
• Is this behavior occurs in all browsers or in one specific? – stefita Commented Oct 19, 2009 at 13:33
• 2 If you can reproduce the problem on jsbin. and then share it with us, that would be helpful in diagnosing the problem. – nickf Commented Oct 19, 2009 at 13:36
• I can't reproduce this on a bare-bones example, so I'm trying to figure out what in the existing code is causing it. It's not a jQuery issue. Thanks for ments. – James Inman Commented Oct 19, 2009 at 14:05

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

What you are experiencing is not standard behavior. When removing element from DOM, occupied space should be also removed

This could be one of the reason. There could be break tags after the element. You might be hiding/removing only the element, but the break tags still remain which cause empty space.

Ex:

<div id="one">Blah Blah</div>
<br/>
<div id="two">Blah Blah</div>
<br/>
<div id="three">Blah Blah</div>
<br/>
<div id="four">Blah Blah</div>

If you hide/remove div id "three", There will be 3 unnecessary break tags.

Imagine a long such list which is generated with your code and your hiding 20 elements, then there will be 20 break tags which create empty blocks.

To overe this, add a class to all these divs and give style attribute 'padding'