How do I add/remove elements in a jQuery Mobile navbar?

In jQuery Mobile, lets say I have the following navigation bar:

<div data-role="navbar">
    <ul>
        <li><a id="item1">Item 1</a></li>
        <li><a id="item2">Item 2</a></li>
        <li><a id="item3">Item 3</a></li>
    </ul>
</div>

I can then just use jQuery to remove an item to make this look like:

<div data-role="navbar">
    <ul>
        <li><a id="item1">Item 1</a></li>
        <li><a id="item3">Item 3</a></li>
    </ul>
</div>

However, jQuery Mobile still renders it as if there are three tabs, and in the middle one, there is just nothing there. So instead of it being spaced out with each tab taking 1/2 of the width, each of the two remaining tabs just takes 1/3 of the width.

I looked closer and jQuery Mobile automatically adds a class to the <ul> element called "ui-grid-b" and if I change that manually to "ui-grid-a" it then looks fine and the two tabs take up the whole width. However, changing those classes manually seems too hackish and I'm guessing there is a better way to do it. Any ideas?