CODEWITHSUNDEEP
jquery-mobile
Venkat Papana
Venkat Papana

Reputation: 4927

jquerymobile: how to delete list items divider

I don't want to show lines / border between each list item of a listview. How can I achieve this?

Thanks, Nehatha

Upvotes: 3

Views: 1790

Answers (2)

Phill Pafford
Phill Pafford

Reputation: 85308

Live Example:

JS

$('#noBorders').children().removeClass('ui-body-c');

HTML

<div data-role="page"> 
    <div data-role="content" > 
        <ul data-role="listview" data-inset="true"> 
            <li data-role="list-divider">List Items</li> 
            <li>Item #1</li> 
            <li>Item #2</li>
            <li>Item #3</li>
            <li>Item #4</li>
            <li>Item #5</li>
        </ul> 
        <ul data-role="listview" data-inset="true" id="noBorders"> 
            <li data-role="list-divider">List Items no borders</li> 
            <li>Item #6</li>
            <li>Item #7</li>
            <li>Item #8</li>
            <li>Item #9</li>
            <li>Item #10</li>
        </ul>
    </div>
</div>

Upvotes: 3

Spike
Spike

Reputation: 5130

You can just add your CSS. jQuery Mobile has CSS to mark up list elements which includes the borders, so simply override these defaults.

Upvotes: 4

Related Questions