jQuery to remove a button from footer navbar - jquery-mobile

Question

Using jQueryMobile 1.4.5, I need to toggle the presence of the middle button on and off so that the other 2 buttons butt_up against each other if the middle button is gone.
My js script makes it disappear but leaves room between the ouster 2 buttons.
How can this be achieved? Thanks
jQuery.fn.invisible = function() {
return this.css('visibility', 'hidden');
};
jQuery.fn.visibilityToggle = function() {
return this.css('visibility', function(i, visibility) {
return (visibility == 'visible') ? 'hidden' : 'visible';
});
};
$("li:nth-child(2)").invisible();
<footer data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><button type="submit" data-theme="c">NO</button></li>
<li><button type="submit" data-theme="c">EXTRA</button></li>
<li><button type="submit" data-theme="c">YES</button></li>
</ul>
</div>
</footer><!-- footer -->

Answer 1

At the moment there is no jqm method to refresh a navbar. Hopefully we get one with 1.5 ...
But you can manipulate the "grid classes" of the navbar.
I think this is the easiest way if you only want to add/remove one button.
$('#toggle').on("click", function() {
if ($("#navbar > ul").hasClass('ui-grid-b')) {
$("#extra").hide();
$("#navbar > ul").removeClass('ui-grid-b').addClass('ui-grid-a')
.find("li").last().removeClass('ui-block-c').addClass("ui-block-b");
} else {
$("#extra").show();
$("#navbar > ul").removeClass('ui-grid-a').addClass('ui-grid-b')
.find("li").last().removeClass('ui-block-b').addClass("ui-block-c");
}
});
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<button id="toggle">Toggle</button>
<footer data-role="footer" data-position="fixed">
<div data-role="navbar" id="navbar">
<ul>
<li>
<button type="submit" data-theme="c">NO</button>
</li>
<li id="extra">
<button type="submit" data-theme="c">EXTRA</button>
</li>
<li>
<button type="submit" data-theme="c">YES</button>
</li>
</ul>
</div>
</footer>
<!-- footer -->