Tutorial :jQuery remove() on element doesn't hide used space


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().


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.


<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 overcome this, add a class to all these divs and give style attribute 'padding'

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »