javascript - Hiding button in bootstrap -

i'm trying hide 1 or more radio buttons in bootstrap. see jsfiddle.

settimeout(function () {     $("input[value='other']").parent().hide(); }, 1000); 

it works expected except removing either of side buttons leaves new side button incorrectly styled (no rounded corners). in example removing 'female' works fine, removing 'male' or 'other' results in incorrectly styled button row.

what easiest way fix this? note might have unhide buttons under circumstances removing dom not desirable.

bootstrap applies style last element.

solution i (if don't want remove button , hide it):

create class in css give rounded corners , add class prev() element. , when show() element remove class. fiddle

js:

settimeout(function () {     $("input[value='other']").parent().prev().addclass('pseudolast')     $("input[value='other']").parent().hide();  }, 1000); 

css:

.pseudolast{     border-bottom-right-radius: 4px !important;     border-top-right-radius: 4px !important; } 

when show button do:

$("input[value='other']").parent().prev().removeclass('pseudolast') $("input[value='other']").parent().show(); 

solution ii :

you need remove element fiddle

js:

settimeout(function () {     $("input[value='other']").parent().remove(); // < here }, 1000); 

later can append element.