JQM Padding With Hidden Elements

Question

Sample fiddle of my problem: http://fiddle.jshell.net/FS8rj/

I have a few places where I don't want users to be able to delete something out of a collapsible using an icon -- so I want to hide this icon completely.

It seems jQuery Mobile puts padding for each element in the collapsible so that elements don't clump together.

I tried refreshing the entire list-view, but jQuery Mobile doesn't recognize that I've hidden an element with jQuery and it continues to add the padding regardless. I know one workaround is to disable the icon rather than hide it, but I don't want to leave it greyed out on the screen at all.

Is it possible to disable this without overwriting it with more css or similar methods?

Answer 1

jQuery Mobile adds ui-li-has-alt to li with split button. All you need is to remove that class and add it back when you show the button again.

Demo

$('li').removeClass('ui-li-has-alt');

Edit: Using .closest() to remove class from parent li.

$('.hide').hide().closest('li').removeClass('ui-li-has-alt');