I have 3 buttons in a row on my asp.net page, I use a javascript to set the button in the middle(ButtonSR) to invisible, but by doing that, I also want the button under it to take its place instead of leaving a empty space.
Here is my asp.net code for these three button:

```
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Editing <b class="caret"></b></a>
              <span class="dropdown-arrow"></span>
              <ul class="dropdown-menu">
                <li><a href="#" id="ButtonLR" class="btn btn-inverse" style="font-weight:bold; color:white">&nbsp Load Resources</a></li>
                <li><asp:Button ID="ButtonSR" Text="Save Resources " runat="server" CssClass="btn btn-inverse" onclick="ButtonSR_Click" /></li>
                <li><a href="#" id="historyBtn" class="btn btn-inverse" style="font-weight:bold; color:white">&nbsp History</a></li>
              </ul>
            </li>

```

And here is my javascript to set the button invisible:

```
 document.getElementById('ButtonSR').style.visibility = 'hidden';

```

How do I make historyBtn to take ButtonSR's place in javascript after setting ButtonSR invisible, in order to avoid empty space on my page?