隐藏包含特定文本的div [英] Hide div that contains specific text

问题描述

我想根据里面的文字隐藏一个div。在下面的示例中，我想用 Handtekening隐藏那些，而用 Thuis隐藏那些。我更喜欢使用CSS。

divs 的类名必须相同...

 < div class = test> 
 Pakket 
< / div> 
< div class = test> 
 Handtekening 
< / div> 
< div class = test> 
 Thuis 
< / div> 
  

如果CSS无法实现，怎么用JavaScript做到呢？

解决方案

这是一个简单的原始Javascript解决方案：

  let divs = document.getElementsByClassName（'test'）; 
 
 for（let x = 0; x 
 let div = divs [x]; 
 let content = div.innerHTML.trim（）; 
 
 if（content =='Handtekening'|| content =='Thuis'）{
 div.style.display ='none'; 
} 
} 
  

在这里使用JSFiddle

请记住在HTML页面末尾（在< / body> 标签）。

I want to hide a div based on the text inside. In the example below I want to hide the ones with "Handtekening" and the one with "Thuis". I prefer to do that with CSS. Is that possible?

The class names of the divs have to be the same...

<div class="test">
     Pakket
</div>
<div class="test">
     Handtekening
</div>
<div class="test">
     Thuis
</div>

If not possible with CSS, how can it be done with JavaScript?

解决方案

Here's an easy vanilla Javascript solution:

let divs = document.getElementsByClassName('test');

for (let x = 0; x < divs.length; x++) {
    let div = divs[x];
    let content = div.innerHTML.trim();

    if (content == 'Handtekening' || content == 'Thuis') {
        div.style.display = 'none';
    }
}

Working JSFiddle here

Remember to include the script at the end of your HTML page (right before the </body> tag).

这篇关于隐藏包含特定文本的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！