如何摆脱隐藏元素带来的多余空白？

Question

我有这个搜索栏，它可以搜索按钮的文本以过滤出选项。基本上，这是一个按钮过滤器。但是，无论何时过滤，按钮仍会保持其原始位置，到处都会留下一堆空白。

这是搜索栏的HTML：

<div id=searchBar>
<input type="text" id="search" placeholder="Search Catalog"> 
<button type="submit" id="searchButton">
  <i class="fa fa-search"></i>
</button> 

和搜索栏的jQuery / JavaScript：

$("#search").on("input", function() {
  var value = $(this).val().toLowerCase();
  document.getElementById('searchButton').onclick = function(){
    $("#page button").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  }
});