How do you hide an HTML element based on a series of parent elements


Tags: javascript,jquery,html,css

Problem :

What i am trying to accomplish is hiding all activity stream posts from one user in a feed by its data type. I am able to distinguish the users post using CSS with this structure

.joms-stream.joms-embedly--left.joms-js--stream > div > div > a > img[data-author="921"] {
display: none !important;

}

How am i able to hide the entire stream item using a series of (this.parent) in jQuery or javascript? Thank you in advance.



Solution :

Your problem can be solved by using the .parents(selector).last() code:

For example:

$("img[data-author="921"]").parents(".joms-stream.joms-embedly--left.joms-js--stream")
    .last().hide();

This code works because jQuery returns a list of parents from .parent(selector) from in most to the out most, thus using .last() will select the out most parent.

Or if you are sure that .joms-stream.joms-embedly--left.joms-js--stream won't appear twice in the nest (you should be quite sure because you are using >s to select), you can use the .closest(selector) method, which will select the closest match from the element:

$("img[data-author="921"]").closest(".joms-stream.joms-embedly--left.joms-js--stream")
    .hide();

P.S. $(jqueryElem).hide() is equivalent to $(jQueryElem).style("display", "none") or elem.style.display = "none" because you seem to be quite new to jQuery.


    CSS Howto..

    How to get the last image viewed to stick instead of reverting to the default in a pure CSS image gallery?

    How to create correct .css for Html.TextBoxFor

    How do I control the spacing between my child links in my CSS driven menu dropdown?

    How to apply css to div which has no class?

    How to make a grid of interactive elements?

    How to fit a list of images in an HTML div to form a 2D grid?

    How to edit HTML with CSS? [closed]

    How to use non-online images in CSS?

    How can you align all the cells to the left with css [closed]

    How to add “android_asset/www/” to the image's path in the CSS only if app is running in Android?

    How to remove the bottom border of a box with CSS

    How can I get two form fields side-by-side, with each field’s label above the field, in CSS?

    How to make the background of my text larger?

    How to save css stylesheet pointer on php session?

    How to Change a Plugin's CSS

    Having 2 css code blocks in html files how to make only one work using JS?

    Two sprites on same position: how to make this happen?

    How to vertically align absolutely positioned images on top of one another?

    In IE Compat View, Developer tools shows elements “style” with the class of the previous element

    How to make all the content placed in the center of div?

    How to reset default button style in Firefox 4 +

    How to Have the Div Aligned to the Middle, and That Relative to the Parent Div?

    How to CSS select each first div without class after div with class?

    How to do navbar fixed?

    How to make a double color single border using css?

    How is the force reload of javascript/css done in Symfony?

    How to animate two divs in html / css to make a semi-circle transition?

    How to add a border bottom like the image?

    How to change CSS of child element inside parent
    element Using jQuery onclick event?

    How to add CSS class attribute for Html helper methods in asp.net mvc (VB.NET)?