jQuery: Finding and hiding single parent link in nested list menu within Div - using contains();

Question

I have a site that's CMS has very limited menu control. As such I'm trying to work around these problems with jQuery to display the menu how I want. I know it will still be in the HTML but as long as it's displaying the way I want it will be fine (at least for my standards).

The menu in question currently looks something like this.

<div id="sidemenu">
    <ul>
        <li class="childlist">
                    <a href="#">GET RID OF THIS PARENT</a>
                        <ul>
                           <li>Show this</li>
                           <li>Show this</li>
                           <li>Show this</li>
                        </ul>
        </li>
    </ul>
</div>

I have achieved what I want with the simple $('a:contains(GET RID OF THIS PARENT)').hide(); however the menu is being pulled into two locations and I only want to hide the one in the sidemenu div.

I have tried this approach:

$side = $('#sidemenu');
$hidethis = $('$side:contains('GET RID OF THIS PARENT')');
$hidethis.hide();

But this crashes the page (I've been playing around in the console in Chrome to try to get a solution)

I will be the first to admit my javascript is terrible so any assistance would be well received.

Thanks in advance.

Do you want to hide whole side menu or just a link which has the text? — Dips, Mar 26 '12 at 23:58
I wanted to hide the top parent link but display it's children. i.e. Hide 'GET RID OF THIS PARENT' and display 'SHOW THIS' 'SHOW THIS' 'SHOW THIS' but taking them up one level in the ul li ul li structure. All of these answers have been great and have hidden the link as requested but I don't think I can achieve what I want through this method so I will have to look at another option. This is for the generated menu in Interspire Shopping Cart and it's menu options aren't great for choosing what to display. I might have to hard code the menu I want. Thanks. — James, Mar 29 '12 at 23:36
To clarify with a better example what I was wanting to achieve: The menu structure would have been something like TOPS with children T-Shirts, Sweaters, Jackets. I was hoping to not display the Tops and just display T-Shirts, Sweaters, Jackets and then display the children of those categories. (Display TOPS' children and grandchildren categories but not TOPS itself) — James, Mar 29 '12 at 23:39
can u update your real code so you can expect more accurate answers. — Dips, Mar 30 '12 at 00:40

score 0 · Answer 1 · answered Mar 26 '12 at 23:46

0

Your code should look like...

$side = $('#sidemenu');
$hidethis = $side.find(':contains('GET RID OF THIS PARENT')');
$hidethis.hide();

answered Mar 26 '12 at 23:46

alex

479,566
201
878
984

Jonathon Hibbard · Answer 2 · 2012-03-26T23:54:56.697

0

try this:

jQuery("#slidemenu").find("a:contains('GIT RID OF THIS PARENT')").hide();

Find First instance...

jQuery("#slidemenu > .childlist:first").find("a:contains('GIT RID OF THIS PARENT')").hide();

Looping through all the children:

jQuery("#slidemenu").find(".childlist").each(function() {
  var $childListBranch = jQuery(this);
  $childListBranch.find("a:contains('GIT RID OF THIS PARENT')").hide();
});

edited Mar 26 '12 at 23:54

answered Mar 26 '12 at 23:47

Jonathon Hibbard

1,547
13
20

score 0 · Answer 3 · answered Mar 27 '12 at 00:01

You need to target what you want to hide. For instance if you want to hide a link which has "get rid of this parent" text you can target a:contains. If you want to hide its parent you need to target #sidemenu:contains to its parent. here is the code example

    //Hide a link
$("a:contains('GET RID OF THIS PARENT')").hide();

    //Hide its parent
$("#sidemenu:contains('GET RID OF THIS PARENT')").hide();

Jsfiddle Demo

jQuery: Finding and hiding single parent link in nested list menu within Div - using contains();

3 Answers3