JQM padding with hidden items

Question

An example script of my problem: http://fiddle.jshell.net/FS8rj/

I have several places where I don’t want users to be able to remove something from the foldable with an icon, so I want to completely hide this icon.

JQuery Mobile seems to put a padding for each item in the foldable so that the items don't compress together.

I tried updating the entire list, but jQuery Mobile does not admit that I hid the item with jQuery and it continues to add an add-on. I know that one workaround is to disable the icon and not hide it, but I do not want to leave it gray on the screen at all.

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

Answer 1

jQuery Mobile adds ui-li-has-alt to li using the split button. All you need to do is delete this class and add it back when you show the button again.

Demo

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

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

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

Answer 2

http://fiddle.jshell.net/njAt4/

Just wrap the tag in a div with your delete class, and then it works as you wish.

 <div class="delete"> <a href="#" data-rel="popup" data-mini="false" data-position-to="window" data-icon="delete"></a> </div> 

This will completely remove the delete icon on this node.

Answer 3

http://fiddle.jshell.net/YGCQM/

The solution was to override the right css attribute "ui-li-count" to 10px. It changes to 53 pixels when there is a button, hidden or not.

 if (reportViewModel.hasDisabledExpenses()) { $('.delete').hide(); $('.delete').parent().find(".ui-li-count").css("right", "10px"); }