页面加载后如何使用jQuery删除li元素？

Question

I have indeed searched and Googled this and have seen the remove function but all the examples I have seen are doing it in a different context. I just want the li removed that has the logout.html link. I know you cannot assign id's to li elements so how to delete a particular element on the fly?

Thanks

<ul data-role="listview">
                        <li>
                            <a href="user_settings.html">
                                <img src="images/info/info-settings.png" width="30" height="30" class="ui-li-icon"/>
                                <h2>User Settings</h2>
                            </a>
                        </li>
                        <li>
                            **<a href="logout.html">
                                <img src="images/info/info-logout.png" width="30" height="30" class="ui-li-icon"/>
                                <h2>Logout</h2>
                            </a>**
                        </li>
                        <li>
                            <a href="http://someurl.com/store?app=ok" rel="external">
                                <img src="images/info/info-also-from.png" width="30" height="30" class="ui-li-icon"/>
                                <h2>Also from Us</h2>
                            </a>
                        </li>
                        <li>
                            <a href="about_us.html">
                                <img src="images/info/info-aboutUs.png" width="30" height="30" class="ui-li-icon"/>
                                <h2>About Us</h2>
                            </a>
                        </li>
                        <li>
                            <a href="about_us.html">
                                <img src="images/info/infsomeimage.png" width="30" height="30" class="ui-li-icon"/>
                                <h2>About Us</h2>
                            </a>
                        </li>
                        <li>
                            <a href="about_legal_info.html">
                                <img src="images/info/info-legalInfo.png" width="30" height="30" class="ui-li-icon"/>
                                <h2>Legal Info</h2>
                            </a>
                        </li>
                        <li>
                            <a href="about_international_dates.html">
                                <img src="images/info/info-international.png" width="30" height="30" class="ui-li-icon"/>
                                <h2>About International Dates</h2>
                            </a>
                        </li>
                    </ul>

Answer 1

There is nothing stopping you adding an id to an li element. It is completely valid. However, without one you could use the has method:

$("li").has("a[href='logout.html']").remove();

This selects all li elements then reduces that set to only those which contain an element matching the selector. It uses an attribute equals selector to match the href to your logout link.

There are numerous other ways you could do this. Another example would be the :contains selector, which matches text (and not a selector) within the element or any of its descendants:

$("li:contains('Logout')").remove();

Obviously you will have to be careful as if there are multiple elements matching the selectors in either case, they will all be removed. If that's the case, you will have to make the selectors more specific in some way.

Answer 2

You can add an id to li elements.

To remove it with jQuery without doing so:

$('li a[href="logout.html"]').closest('li').remove();

Example fiddle .

Answer 3

$(document).ready(function() {

  $('li a[href="user_settings.html"]').parents('li').first().remove();

});

Answer 4

First of all you can assign ids to li elements. You can have <li id="some_id" ></li>

Secondly you can hide your li element using the following code (without id) - or view a working example here

$('a[href="logout.html"]').parent().css('display', 'none');

This should be put in the document's onload callback, so it gets executed after loading the page:

$(function (){
    $('a[href="logout.html"]').parent().css('display', 'none');
});

Answer 5

$("ul li:nth-child(2)").remove(); this will work if your logout.html li should be 2nd element always or you can try $('a[href="logout.html"]').parent().remove();