Table Row Still taking up Space after calling JQuery Remove on it

Question

Hi Everyone,

I'm having a strange problem and haven't been able to find anything about it anywhere. I am using the JQuery remove method on a table row and while it is removing it, it is still leaving a small amount of space where the row used to be. It's hardly even noticeable if I only remove a row or two, but when I remove more you can definitely tell. The CSS for the table is:

/*CSS*/
#results{margin-top:10px;}
#results table{width:750px;empty-cells:show;border-collapse:collapse;}
#results table tr td{cursor:pointer;}
tr.selected{background-color:#FAFAD2;}

/*JQuery*/
$("#btnRemove").click(function(){
    $("#results table tr.selected").remove();
});

Any suggestions?

Answer 1

I would recommend using Firebug, to inspect both the html markup before and after the remove fires to ensure it is removing the elements you expect.

Secondly, I'd recommend using firebug to inspect the table, and it's contents to see exactly where the padding and/or margin is out of whack. Using the "layout" tab under the HTML section in Firebug can give you exact measurements on the elements including padding, margin, border and position/offset, which should make it really clear where the issue is.

Additionally, have you tested in multiple browsers?