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

时间:2012-02-16 07:42:27

标签: javascript jquery

我确实搜索过并搜索了这个并看过删除函数,但我看到的所有示例都是在不同的上下文中进行的。我只想删除具有logout.html链接的li。我知道你不能将id分配给li元素,以便如何动态删除特定元素?

由于

<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>

5 个答案:

答案 0 :(得分:2)

没有什么可以阻止您向id元素添加li。它完全有效。但是,没有一个,您可以使用has方法:

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

这将选择所有li元素,然后将该集合仅减少为包含与选择器匹配的元素的元素。它使用属性equals选择器将href与您的注销链接相匹配。

还有很多其他方法可以做到这一点。另一个例子是:contains选择器,它匹配元素或其任何后代中的文本(而不是选择器):

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

显然你必须要小心,好像在任何一种情况下都有多个匹配选择器的元素,它们都将被删除。如果是这种情况,您必须以某种方式使选择器更具体。

答案 1 :(得分:1)

您可以向id元素添加li

要使用jQuery删除它而不执行此操作:

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

Example fiddle

答案 2 :(得分:1)

$(document).ready(function() {

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

});

答案 3 :(得分:0)

首先,您可以将ID分配给li个元素。您可以<li id="some_id" ></li>

其次,您可以使用以下代码隐藏li元素(无ID) - 或查看working example here

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

这应该放在文档的onload回调中,所以它在加载页面后执行:

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

答案 4 :(得分:0)

$("ul li:nth-child(2)").remove();如果您的logout.html li应该始终是第二个元素,或者您可以尝试$('a[href="logout.html"]').parent().remove();

,这将有效