如何删除带有特定文本的 li？

Question

感谢您花时间阅读本文。

我需要删除包含“登录”的列表项。问题是一旦登录列表项就会发生变化，我无法按照它们在列表中显示的顺序删除它们。我也不能只删除 html 或给任何列表项附加 ID 或类。我可以添加 css 和 javascript 尽管这确实与页面交互。

有没有办法只删除 li 和 anchor 标签中包含“登录”的列表项？

<ul class="nav navbar-nav" id="navLinks">
    <li class="list-group-item">
        <a href="/">Home</a>
    </li>
    <li class="list-group-item">
        <a href="/postings/search">Search</a>
    </li>
    <li class="list-group-item">
        <a href="/user/new">Create Account</a>
    </li>
    <li class="list-group-item">
        <a href="/login">Log In</a>
    </li>
    <li class="list-group-item">
        <a href="/help">Help</a>
    </li>
</ul>

Answer 1

如果登录项总是第四个，可以通过添加下一个js来实现：

document.querySelectorAll('.list-group-item')[3].remove()

这不需要与用户交互，您可以将其添加到您想要的任何功能中。

Answer 2

我假设您希望在用户未登录时显示登录元素，如果登录了则隐藏它。由于您可以控制 CSS，因此添加一个帮助程序 class .hide 将显示属性设置为 display: none;。

然后当你有一个用户登录时，你运行在 JS 中有条件地检查 list-items[=40 的 textContent =] (children[0])，这将是 a 标签。检查 userLoggin 状态，如果两者都 natch 添加 class。我还将 let userLoggedIn = true; 作为参数添加到函数中以检查这是否也是 true 或不允许您根据用户是否登录来控制是否添加 class。

您可以使用 document.querySelectorAll('#navLinks .list-group-item'); 查询 list-group-item，然后遍历 nodeList 并使用条件搜索 textContent 使用 item.children[0].textContent === 'Log In' 的第一个子项 textContent，如果此条件 returns true 然后 用户登录 添加一个 css class 来隐藏元素。

const listItems = document.querySelectorAll('#navLinks .list-group-item') const listItems2 = document.querySelectorAll('#navLinks2 .list-group-item') function hideItem(el, bool) { el.forEach(item => item.children[0].textContent === 'Log In' && bool === true ? item.classList.add('hide') : item.classList.remove('hide') ) } let userLoggedIn = true let userLoggedIn2 = false hideItem(listItems, userLoggedIn) hideItem(listItems2, userLoggedIn2)

.hide { display: none; }

<h2>user is logged in</h2> <ul class="nav navbar-nav" id="navLinks"> <li class="list-group-item"> <a href="/">Home</a> </li> <li class="list-group-item"> <a href="/postings/search">Search</a> </li> <li class="list-group-item"> <a href="/user/new">Create Account</a> </li> <li class="list-group-item"> <a href="/login">Log In</a> </li> <li class="list-group-item"> <a href="/help">Help</a> </li> </ul> <h2>user is NOT logged in</h2> <ul class="nav navbar-nav" id="navLinks2"> <li class="list-group-item"> <a href="/">Home</a> </li> <li class="list-group-item"> <a href="/postings/search">Search</a> </li> <li class="list-group-item"> <a href="/user/new">Create Account</a> </li> <li class="list-group-item"> <a href="/login">Log In</a> </li> <li class="list-group-item"> <a href="/help">Help</a> </li> </ul>

如何删除带有特定文本的 li？

How do you remove an li with specific text?

html

javascript

css

html-lists