CODEWITHSUNDEEP
jqueryfindhide
fightstarr20
fightstarr20

Reputation: 12628

Find html element by content and hide using jQuery

I am trying to use jquery to find some elements in some HTML, I would like to find and hide the list id that contains the label text 'This is my test label' and 'Yest another test label

<ul id="mylist" class="top_level_list">
<li id="field66" class="myfield">
    <div class="field_icons">
        <div class="title">This is my title</div>
    </div>
    <label class="my_label" for="input71">This is my test label</label>
</li>
<li id="field20" class="myfield">
    <div class="field_icons">
        <div class="title">This another test title</div>
    </div>
    <label class="my_label" for="input71">Yet another test label</label>
</li>

I have found the jQuery .hide function as well as the .find() function but i'm unsure as to how to select the element using the content within it.

Can anyone help?

Upvotes: 4

Views: 15488

Answers (6)

Mukesh Chapagain
Mukesh Chapagain

Reputation: 26016

Adding window.onload is useful when you are hiding elements on page load.

<li>Your Text</li>

window.onload = function() {
    jQuery("li:contains('Your Text')").hide();
}

If you have, link element (<a>) inside <li> element, then you can use the following code to hide the text inside the <a> element:

<li><a href="yourLink">Your Text</a></li>

window.onload = function() {
    jQuery("li a:contains('Your Text')").hide();
}

Upvotes: 0

j&#246;hg
j&#246;hg

Reputation: 212

Tim Wasson's answer is great - I found that pairing his solution with the .closest() method makes it really easy to hide a whole parent container. I used his solution to find a certain link "Promotions", and then kill the whole section that was holding it and the button styling, etc:

$("a:contains('Promotions')").closest('section').hide();

Might be useful!

Upvotes: 1

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33880

I have, in my personnal files, a prototype that does what you want. I can share it with you. Just add this in somehwere in your document before calling the code :

$.fn.filterText = function(text, caseSensitive){
    var returnedObj = $(),
        caseSensitive = caseSensitive || false,
        $this = $(this);
    if(typeof text == 'object'){
        for(var i = 0; i < text.length; i++){
            if(typeof text[i] == 'string'){
                console.log(i);
                returnedObj = returnedObj.add($this.filter(function(){
                    var search = caseSensitive ? text[i] : new RegExp(text[i], 'i')
                    return $(this).text().search(search) != -1;
                }))

            }
        }
    }else if(typeof text == 'string'){
        returnedObj = returnedObj.add($this.filter(function(){
            var search = caseSensitive ? text : new RegExp(text, 'i')
            return $(this).text().search(search) != -1;
        }))
    }
    return returnedObj;
}

Then, you'll be able to hide parent with that line :

$('label').filterText(['This is my test label', 'Yet another test label'], true /*case sensitive?*/)
          .parent()
          .hide()

Fiddle : http://jsfiddle.net/yKprx/

Maybe just add in a comment before the $.fn //Author @Karl-André Gagnon :)

Upvotes: 2

BeNdErR
BeNdErR

Reputation: 17927

Have a look here: http://jsfiddle.net/yPFgu/1/

CODE

var labelsToHide = ["This is my test label", "Another one"];

$("li").each(function () {
    var txt = $(this).find("label").text();
    if (labelsToHide.indexOf(txt) > -1 )
        $(this).hide();
});

Hope it helps.

Upvotes: 2

Alan Piralla
Alan Piralla

Reputation: 1196

You can select them like this:

$('.title').each(function() {
    if (($(this).text() == 'This is my test label') || ($(this).text() == 'Yet another test label')) {
      $(this).hide();
    }
});

Upvotes: 1

Tim Wasson
Tim Wasson

Reputation: 3656

This is a slightly easier solution. $(".my_label:contains('This is my test label')").hide();. You can see it in action here: http://jsfiddle.net/kPxTw/

Upvotes: 5

Related Questions