通过其包含的文本从 html 中删除项目答案

【问题标题】：Removing items by its contained text from html通过其包含的文本从 html 中删除项目
【发布时间】：2018-12-15 16:35:37
【问题描述】：

我正在寻找一种解决方案，以便在页面加载时从我的 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>

【问题讨论】：

告诉我们你的尝试，否则没有人会帮助你。
这是我迄今为止尝试过的<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>
您的问题得到解答了吗？如果是这样，为什么您还没有选择答案？如果没有，你为什么没有做出相应的评论？

标签： javascript jquery contains

【解决方案1】：

您可以使用querySelectorAll 选择项目，使用Array.from 将NodeList 转换为数组，然后遍历每个项目并将其删除。

const wordsToRemove = ['blabla3', 'blabla2'];
const items = Array.from(document.querySelectorAll('li > a'));

const result = items
  .filter(item => wordsToRemove.includes(item.textContent))
  .forEach(item => item.parentNode.parentNode.removeChild(item.parentNode));

<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>

【讨论】：

这正是我 6 分钟前的回答所暗示的。

【解决方案2】：

另一种方法是使用选择器:contains 和函数closest 来选择父元素li。

这种方法会删除元素li 与文本blabla4

$('#remove').on('click', function() {
  $("li a:contains(blabla4)").closest('li').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
</ul>

<button id='remove'>remove blabla4</button>

【讨论】：

为什么不简单地$(".dropdown-menu li:contains(blabla4)").remove();。顺便说一句，我什至不会考虑使用 jQuery 来完成这项任务。
@connexo 为什么不使用 jQuery？该问题已使用该库标记。
因为它很慢，很胖而且完全没有必要。
@connexo 但由于某种原因，OP 已用 jQuery 标记。
他们还标记了javascript。

【解决方案3】：

您可以使用 JQuery 来做到这一点：

$(".dropdown-menu > li > a").each(function () {
    var $this = $(this);
    if ($this.html() == 'bla bla bla') {
        $this.parent().remove();
    }
});

【讨论】：

这段代码的问题比我愿意解决的要多。

【解决方案4】：

您可以创建一个数组数据结构，该结构将保存应删除的值 <li> 然后循环到类 dropdown-menu 内的所有 <li> 标记，并根据它们与数组的内容匹配来删除它们价值：

$(document).ready(function(){
  var removeText = ['blabla4', 'blabla2', 'blabla1'];
  $('.dropdown-menu li').each(function(){
    var text = $(this).find('a').text().trim();
    if(removeText.indexOf(text) !== -1){
      $(this).remove();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

【讨论】：

【解决方案5】：

使用 JQuery .remove() 删除 HTML 标签，但你应该在要删除的标签上有一个选择器：

$( document ).ready(function() {
    $('.dropdown-menu').find("li").slice(4, 5).remove();
    $('.dropdown-menu').find("li").slice(5, 6).remove();
    $('.dropdown-menu').find("li").slice(5, 6).remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
</ul>

【讨论】：

【解决方案6】：

只需收集列表项，将生成的 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>

【讨论】：