如何在 div 中删除 ul 中的 li？

Question

我有一个div，其中包含一个ul，而ul中有一些li。

我只想查找一些文本并从ul中删除li。

例如：

<div id="div1">
  <ul>
    <li>Hello</li> <!--i need to remove this.-->
  </ul>
</div>

- nimi

---

所以你想要删除包含文本“Hello”的<li>元素吗？ - Dominic Rodger

是的，我需要删除包含文本“Hello”的整个li。 - nimi

Answer 1

var div = document.getElementById('div1'),
    ul = div.getElementsByTagName('ul')[0],
    li = ul.getElementsByTagName('li'),
    len = li.length;

// Go backwards so that removing items has no effect
while (len--) {
    if ( /Hello/.test(getText(li[len])) ) {
        ul.removeChild(li[len]);
    }
}

function getText(node) {
    var s = '';
    node = node.firstChild;
    if ( node ) do {
        if ( node.nodeType === 3 ) {
            s += node.data;
        }
        if ( node.nodeType === 1 ) {
            s += getText(node);
        }
    } while ( node = node.nextSibling );
    return s;
}

- James

---

这是我最近记忆中第二次看到这种递归下降来获取节点文本表示（另一个是https://dev59.com/F3RA5IYBdhLWcg3w9y10#765427），当然jQuery的`text()`也是这样做的。但是，如果您知道正在处理一个`Element`节点，为什么不使用`textContent || innerText`呢？真的很好奇... - Crescent Fresh

@Crescent，请看这里Kangax的回答：https://dev59.com/OnM_5IYBdhLWcg3wfTI0 ... 递归DOM遍历方法是确保在所有浏览器中正常工作的最简单方法。 - James

@J-P：我之前已经阅读并点赞了那个答案，只是忘记了。谢谢！ - Crescent Fresh

Answer 2

使用jQuery，您可以做到这一点：

$("#div1 ul li:contains('Hello')").remove();

- Dominic Rodger

---

+1 那样做完全没问题。你真的需要指定 div#div1 吗？你不能用 #div1 吗？还是有什么原因呢？ - marcgg

@marcgg，不，那可能太冗长了。已删除。 - Dominic Rodger

是的，你可以省略 div。 - NDM

您不必使用ID选择器作为标签名的前缀。 - rahul

OP要求的是JavaScript而不是jQuery。 - Mathias Bynens

Answer 3

function removeLi()
{
    var DIV = document.getElementById('div1');
    var LI = DIV.getElementsByTagName('li');
    LI[0].parentNode.removeChild(LI[0]); //remove the first li
    //LI[1].parentNode.removeChild(LI[1]); //remove the second li
}

- Leo

---

这并不仅仅删除包含文本“Hello”的li，符合他的要求。 - Dominic Rodger