如果子級包含特定文本/字符串，如何隱藏父級div？

Question

這是我的代碼：

 <div class="row word-style table-border">
 <a href="#" target="_blank">
 <div class="col-md-1 underlined">00184799</div>
        </a>

    <div class="col-md-1">  
        Salesforce Case 
    </div>

    <div class="col-md-3">
     Machine Down 
    </div>


    <div class="col-md-1">
        Machine Down
    </div>

    <div class="col-md-1">
        Internal Request
    </div>

</div>

如果文本“內部請求”出現，我想隱藏整個div。

Answer 1

您需要為此使用DOM API，

$containers = document.querySelectorAll("div.row.word-style.table-border");

for($container of $containers) {
  if ($container.innerText.includes('Internal Request')) {
    $container.style.display = "none" ;
  }
}

檢查此鏈接

Answer 2

下面的代碼應該為您工作：

$('.row .col-md-1').each(function(index,col){
    if($(col).text() == 'Internal Request'){
       $(col).hide();
    }
})

Answer 3

剝蘋果的方法很多。 這是一個：

 var row=document.querySelector(".row"); var children = row.childNodes children.forEach(c=>{ if(c.innerHTML&&c.innerHTML.indexOf("Internal Request") !== -1) { row.className+=" hidden" } }); 

 .hidden{ display: none; } 

  <div class="row word-style table-border"> <a href="#" target="_blank"> <div class="col-md-1 underlined">00184799</div> </a> <div class="col-md-1"> Salesforce Case </div> <div class="col-md-3"> Machine Down </div> <div class="col-md-1"> Machine Down </div> <div class="col-md-1"> Internal Request </div> </div>