如果子级包含特定文本/字符串，如何隐藏父级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" ;
  }
}

check this link

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>