如果子级包含特定文本/字符串,如何隐藏父级div?

时间:2019-05-11 16:27:51

标签: javascript

这是我的代码:

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

3 个答案:

答案 0 :(得分:0)

您需要为此使用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

答案 1 :(得分:0)

下面的代码应该对您有用:

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

答案 2 :(得分:0)

有很多方法可以剥这个苹果。这是一个:

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>