如何根据内部 SPAN 内的文本删除整个 DIV答案

【问题标题】：How to remove whole DIV, based on text inside of inner SPAN如何根据内部 SPAN 内的文本删除整个 DIV
【发布时间】：2019-08-23 03:22:14
【问题描述】：

您能否提供一个建议 - 如何使用我的 Tampermonkey 删除/隐藏整个 div 块？如下所示的代码：如果整个 div “relative ember-view” 在父 div “relative ember-view” 的深处包含一个带有文本 ADSWG 的跨度，我该如何删除它？所以在网页上有很多“相对的 ember-view”-div，但我试图只删除这些，它们在 span 标签中包含 ADSWG。

希望，我已经解释清楚了。提前谢谢你。

<div id="ember175" class="relative ember-view"> 
    <div id="ember177" class="occludable-update ember-view">
        <div .....
        <span class="...
            <div id="ember270" class="
                <span id="ember273" class="ember-view">
                        <span>ADSWG</span>

【问题讨论】：

标签： jquery greasemonkey tampermonkey userscripts

【解决方案1】：

如果您在 TamperMonkey 脚本中引用 jQuery（我将假设问题上的标签），那么这是使用 :has、:contains 和 remove() 的单行代码：

$('div.relative.ember-view:has(span:contains("ADSWG"))').remove();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Content before</p>
<div id="ember175" class="relative ember-view">
  <div id="ember177" class="occludable-update ember-view">
    <div>
      <span class="foo">
        <div id="ember270" class="foo">
          <span id="ember273" class="ember-view">
            <span>ADSWG</span>
          </span>
        </div>
      </span>
    </div>
  </div>
</div>
<p>Content after</p>

【讨论】：

【解决方案2】：

点击使用$.each检查以下内容

$(document).ready(function() {
  $("#btnShow").click(function() {
    debugger
    ShowHideDiv('show');
  });
  
  $("#btnHide").click(function() {
    ShowHideDiv('hide');
  });

  function ShowHideDiv(click) {
    var div = $('div .ember-view').find('span');
    $.each(div, function(i, span) {
      if (span.innerHTML.trim() == 'ADSWG') {
        if (click == 'show') {
          $(div).show();
        } else if (click == 'hide') {
          $(div).hide();
        }
      }
    });
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ember175" class="relative ember-view">
  <div id="ember177" class="occludable-update ember-view">
    <div>
      <span>
        <div id="ember270" >
          <span id="ember273" class="ember-view">
            <span>ADSWG</span>
          </span>
        </div>
      </span>
    </div>
  </div>
  <button id="btnShow">SHOW DIV</button>
  <button id="btnHide">HIDE DIV</button>

【讨论】：