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?

Accepted Answer

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');
```

JQM Padding With Hidden Elements

Solution

Problem