javascript - 通过其包含的文本从 html 中删除项目

Question

我正在寻找一种解决方案，以便在页面加载时从我的 html 中删除项目。

<ul class="nav navbar-nav">
<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Модули <span class="caret"></span></a>
    <ul class="dropdown-menu" role="menu">
        <li>
            <a href="#"><strong>blabla</strong></a>
        </li>
        <li>
                <a href="/admin/logentry/">blabla6</a>                
        </li>
        <li role="presentation" class="divider"></li>
        <li>
            <a href="#"><strong>blabla5</strong></a>
        </li>
        <li>
                <a href="/entrances/apartment/">blabla4</a>
        </li>
        <li>
                <a href="/entrances/entrance/">blabla3</a>
        </li>
        <li>
                <a href="/entrances/entrancekasasummary/">blabla2</a>
        </li>         
        <li>
                <a href="/entrances/paymentscashier/">blabl1</a>                
        </li>
    </ul>
</li>

所以我想删除例如 blabla4, blabla2, blabla1 包括他们的<li>标签

这是我迄今为止尝试过的

<script type="text/javascript">
    // select relevant elements 
    var elements = $('content-main'); 
    // go through the elements and find the one with the value
    elements.each(function(index, domElement) { 
        var $element = $(domElement);
        // does the element have the text we're looking for?
        if ($element.text() === "blabla2") {
            $element.hide(); // hide the element with jQuery return false;
            // jump out of the each 
        } 
    }); 
</script>

标签： javascriptjquerycontains

Answer 1

只需收集列表项，将结果NodeList转换为Array，然后对其进行迭代，删除innerHTML包含“blabla”的项目。

const listitems = Array.from(document.querySelectorAll('.dropdown-menu li'));

for (const listitem of listitems) {
  if (listitem.innerHTML.indexOf('blabla') != -1) {
    listitem.parentNode.removeChild(listitem);
  }
}

<ul class="dropdown-menu" role="menu">
  <li>
    <a href="#"><strong>blabla</strong></a>
  </li>
  <li>
    <a href="/admin/logentry/">blabla6</a>
  </li>
  <li role="presentation" class="divider"></li>
  <li>
    <a href="#"><strong>blabla5</strong></a>
  </li>
  <li>
    <a href="/entrances/apartment/">blabla4</a>
  </li>
  <li>
    <a href="/entrances/entrance/">blabla3</a>
  </li>
  <li>
    <a href="/entrances/entrancekasasummary/">blabla2</a>
  </li>
  <li>
    <a href="/entrances/paymentscashier/">blabl1</a>
  </li>
</ul>