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:
$("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.