Brigitte Brigitte - 4 months ago 16
CSS Question

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

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.


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

For example:


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:


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