頁面加載后如何使用jQuery刪除li元素？

Question

我確實已經搜索並用Google搜索了此功能，並看到了remove函數，但是我所看到的所有示例都在不同的上下文中執行此操作。 我只希望刪除具有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>

Answer 1

沒有什么可以阻止您向li元素添加id的。 這是完全有效的。 但是，沒有一個，您可以使用has方法：

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

這將選擇所有li元素，然后將其減少為僅包含與選擇器匹配的元素的那些元素。 它使用屬性等於選擇器將href匹配到您的注銷鏈接。

還有許多其他方法可以執行此操作。 另一個示例是:contains選擇器，它與元素或其任何后代中的文本（而不是選擇器）匹配：

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

顯然，您將必須小心，因為在任何一種情況下都存在多個與選擇器匹配的元素，它們都將被刪除。 在這種情況下，您將必須以某種方式使選擇器更加具體。

Answer 2

您可以為li元素添加一個id 。

要使用jQuery刪除它而不這樣做：

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

小提琴的例子 。

Answer 3

$(document).ready(function() {

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

});

Answer 4

首先，您可以為li元素分配ID。 您可以具有<li id="some_id" ></li>

其次，您可以使用以下代碼（沒有ID）隱藏li元素-或在此處查看工作示例

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

這應該放在文檔的onload回調中，以便在加載頁面后執行：

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

Answer 5

$("ul li:nth-child(2)").remove(); 如果您的logout.html li應該始終是第二個元素，或者您可以嘗試$('a[href="logout.html"]').parent().remove(); ;，這將起作用$('a[href="logout.html"]').parent().remove();