Jquery Mobile 1.0a2 remove listview arrow

Question

I was trying to remove the right arrow which comes in listview by default. Searched for a while came across data-icon="false"but it did not work. Then i searched more and found this post JqueryMobile - Listviews right arrow (I may be duplicating this post, please excuse me for that)

My question is, how exactly can i remove the arrow in 1.0a2? Apparently this can be done using DOM surgery, can anyone elaborate this?

Why are you still using 1.0a2 when the 1.2 has just been released? — Newbo.O
– Newbo.O, Commented Oct 10, 2012 at 20:57
I think you add data-icon="false" in ul and this not work. try it in every li. I tested this in 1.0 and this work perfectly. — Mimouni
– Mimouni, Commented Apr 18, 2015 at 15:15

Taifun · Accepted Answer · 2014-09-23 14:43:09Z

1

for newer jQuery Mobile versions, just set data-icon="false", see also the documentation

To prevent icons from appearing altogether, set the data-icon attribute to "false".

enter image description here

answered Sep 23, 2014 at 14:43

Taifun

6,30218 gold badges67 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Littm · Accepted Answer · 2012-10-11 00:25:28Z

A workaround would be to "manually" remove the arrows with the following JS / jQuery code:

$(function() {
    $('li').removeClass("ui-btn-icon-right"); 
});

Here's a full working example, have a try:

<!DOCTYPE unspecified PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile.structure-1.0a2.min.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
    <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>

    <script>
        $(function() {
            $('li').removeClass("ui-btn-icon-right"); 
        });
    </script>
</head>

<body>
    <div data-role="page" id="p1">
        <div data-role="content">
            <ul data-role="listview" data-theme="a" >                   
                <li><a href="#p2">Go to page 2</a></li>
                <li><a href="#p3">Go to page 3</a></li>
            </ul>
        </div>
    </div>

    <div data-role="page" id="p2">
        Hello! This is page 2!!!
    </div>

    <div data-role="page" id="p3">
        Hello! This is page 3!!!
    </div>

</body>
</html>

However, I suggest to get the latest version of jQuery Mobile (1.2 at the moment), which corrected several bugs and which is in this way more stable.

Check the website for more information: http://jquerymobile.com/

Hope this helps.

this not a good idea to use a function jquery, when you have a parameter like : data-icon="false". (your function will delete a class or we can from first disable the creation of this class)

Collectives™ on Stack Overflow

Jquery Mobile 1.0a2 remove listview arrow

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related