javascript - 从要删除的 li 中找到特定的锚链接

Question

我试图编写一个代码来从 ul 中删除一个 li，但我想更具体一些。我想在删除它及其包含的 li 之前找到确切的锚链接。

在下面的示例中，我只想删除Another link.

到目前为止，我的代码如下所示：

<ul class="working-list">    
        <li class="work color1">
            <a href="?c=Some link 1">
                <span class="title">
                    link 1</span>
            </a>
        </li>
    
        <li class="work color1">
            <a href="?c=someLink2"><span class="title">
                    Some link 2</span>
            </a>
        </li>
    
        <li class="work color1">
            <a href="?c=anotherLink"><span class="title">
                    Another link</span>
            </a>
        </li> 

        <li class="work color1">
            <a href="?c=SmallLink"><span class="title">
                    Small link</span>
            </a>
        </li>    
    </ul>

到目前为止的脚本：

let pickEl = document.querySelectorAll('.working-list li');
    // let pickA = document.querySelector('a[href=\'?c=anotherLink\']');
    console.log(pickEl);
    pickEl[3].remove();

最好的方法是什么？

标签： javascript

Answer 1

您可以尝试使用Attribute selectors选择器：

let pickEl = document.querySelector('.working-list li a[href="?c=anotherLink"]');
console.log(pickEl);
//remove the parent li
pickEl.closest('li').remove();

<ul class="working-list">    
    <li class="work color1">
        <a href="?c=Some link 1">
          <span class="title">link 1</span>
        </a>
    </li>

    <li class="work color1">
        <a href="?c=someLink2">
          <span class="title">Some link 2</span>
        </a>
    </li>

    <li class="work color1">
        <a href="?c=anotherLink">
          <span class="title">Another link</span>
        </a>
    </li> 

    <li class="work color1">
        <a href="?c=SmallLink">
          <span class="title">Small link</span>
        </a>
    </li>    
</ul>