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



Question:

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


Solution:1

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


Solution:2

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 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
Previous
Next Post »