How to refresh a div after hiding contents

I have the following HTML code

<div id="multiSelectDialog" title="Select">
<input type="text" id="MultiSelectDialog_Search" name="MultiSelectDialog_Search" onchange="multiSelectDialog_Search_TextChanged()" />
<div id="MultiSelectDialog_List" data-value="">
        <!--The data will goes here-->
</div>
<input type="hidden" name="MultiSelectDialog_Values" id="MultiSelectDialog_Values" />
<button id="MultiSelectDialog_Submit" onclick="multiSelectDialog_SubmitButton_Click()">Submit</button>

I am filling the data of the "MultiSelectDialog_List" div using javascript like this:

   var jsonData = JSON.parse(s);
for (var i = 0; i < jsonData.length; i++) {

    // Hold the original list

    $("#MultiSelectDialog_List").append("<input type='checkbox'  id ='"+jsonData[i][idProp] +"'  value='"
             + jsonData[i][idProp] + "' data-value='" + jsonData[i][nameProp].toLowerCase() + "' > <label data-value ='"
           + jsonData[i][nameProp].toLowerCase() + "'  id ='lbl" +jsonData[i][idProp]+ "'>" + jsonData[i][nameProp] + "</label> <br/>");
}

where "s" is a JSON string.

Then I am using this script to hide some content:

    var enteredText = $("#MultiSelectDialog_Search").val();
var ary = $("input[type='checkbox']:not([data-value*='" + enteredText.toLowerCase() + "'])");

for (var i = 0; i < ary.length; i++) {
  $(  "#"+ary[i]["id"]) .hide();
}

The problem is that the content of the div are not redrawen correctly after hiding some elements. Check the image:

Before hiding elements

When hiding elements, see the gaps

How should I refresh the div? I tried to use hide() and show(), fadein(). but did not work.