Bootstrap 3 button group: corner radius disappears after a button is hidden

Question

I have the following Bootstrap 3 button group:

  Left
         


        
      

Answer 1

AngularJS solution

For pure jQuery projects, Josh Croziers answer is correct.

But if you happen to be using AngularJS, there is a much simpler solution:

Add an ng-if="expression" to the button. When expression is true, the button will be shown, otherwise it will be removed from the DOM completely. This makes the "new" first button have rounded corners, because the :first-child selector that Bootstrap uses now selects that one.