隐藏包含特定字符串的div

Question

I've been trying to hide divs that contain particular string using the other solutions suggested on this site, however none worked (most likely due to my inexperience with jQuery)

I'd like to completely hide all divs that (in this example) contain the string 'zynthesized'

 <div class="photos-wrapper" id="detailPhoto-977355202965894535_11842652"> <div class="pseudo"> <a href="#/user/11842652/">zynthesized</a> </div> <div class="image-wrapper"> <a href="#/detail/977355202965894535_11842652" class="lienPhotoGrid"><img src="https://scontent.cdninstagram.com/hphotos-xfp1/t51.2885-15/s150x150/e15/11195725_518243828313545_1133319712_n.jpg"></a></div> <div class="activites"> <span class="popular_picto ss-star "></span> <div class="album-relative detail-photo-album-977355202965894535_11842652" style="display: none;"> <input type="hidden" class="apalbumsPhoto" value="977355202965894535_11842652"> <input type="hidden" class="apalbumsPhoto-977355202965894535_11842652" value=""> </div> <span class="nb_comment_score">0</span> <span class="comment_picto ss-chat"></span> <span class="nb_like_score">4</span> <a href="#" class="like_picto_unselected likeAction ss-heart gridLike" id="like-977355202965894535_11842652"></a> </div> <div class="nouveau-commentaire"> <textarea id="comment-977355202965894535_11842652" class="textareaCommentaire" placeholder="Your comment"></textarea> <a href="#" class="commentAction ss-chat" id="postComment-977355202965894535_11842652"></a> <img src="http://static.iconosquare.com/images/loading.gif" class="commentLoading"> </div> </div> 

From what I've seen something like

 $('.photos-wrapper:contains("zynthesized")').hide() 

Should be closest to what I need, but I've had no luck with it.

Any help would be amazing!

Answer 1

Thanks for the help guys! Turns out that the script was working however as the page loaded new divs automatically when scrolling, the script had to be run after the page loaded them.

The final script looks like

$(window).load(function(){  
    $(".photos-wrapper:contains('zynthesized')").hide();  
});  

$(window).on('scroll', function() {
    var y_scroll_pos = window.pageYOffset;
    var scroll_pos_test = 150;             

    if(y_scroll_pos > scroll_pos_test) {
        $(".photos-wrapper:contains('zynthesized')").hide();
    }
});

Hopefully this helps anyone looking to do something similar!

Answer 2

You can simply use a regex.

<script>
    var ptrn = /zynthesized/g;

    $( "div" ).each(function( index ) {
      if(ptrn.test($( this ).text())){
        $( this ).hide();
      }
    });
</script>

Here is simple snippet : jsfiddle.net/dariubs/hgbm3doa