如何隐藏基于一系列父元素的HTML元素

Question

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.

Answer 1

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();

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