5

Assume you are annoyed by my posts and want to hide all my comments from Stack Overflow. I know how to create a custom CSS to hide my username:

a[href$="what"] {
    display:none !important;
}

Unfortunately CSS does not allow me to refer to the parent element, so this will leave the text of the comment.

How can I hide the parent or preceding sibling to that link tag?

I'm not asking for a CSS selector! I know it doesn't exist. Please read the question before closing (and before providing answers that tell me what I already mentioned in my question).

I'm asking how you can select a DOM element in the absence of a relevant CSS selector. I believe there are JS solutions, but I can get none of them to work. Maybe there are other options, therefore I'm not asking for JS specifically. If you tell me how to parse the page with PHP and display it through another domain, that's completely fine with me.

Hints that Greasemonkey might do this are not helpful at all. Explain how to do it. Get it to work on your machine and post a detailed explanation. I couldn't get any of the available scripts to work.

  • 1
    Wouldn't it be better to use the user `id`? There could be multiple users with the name 'what'. – Josh Crozier Mar 19 '14 at 22:24
  • possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) or [CSS previous sibling selector](http://stackoverflow.com/questions/1817792/css-previous-sibling-selector) – Oriol Mar 19 '14 at 22:25
  • 1
    @Oriol Err, I did **not** ask, whether there is a CSS parent or child selector. I asked how you can select it in the absense of such a selector. Please read my question carefully: "Unfortunately CSS does not allow me to refer to the parent element ..." So this question is not a duplicate. –  Mar 20 '14 at 06:32
  • 2
    @what Ok, voted to reopen. Since the question only has CSS tag, I believed you wanted a css-only solution. Better add the possible languages in which you want a solution. – Oriol Mar 20 '14 at 15:22

4 Answers4

2

You can't, as CSS has no means of selecting a parent node and applying a style to it. You'd need to use JavaScript for this. If specifically for creating user-modifiable layouts, likely via the Greasemonkey Firefox plugin (or similar plugin in a another browser).

DA.
  • 39,848
  • 49
  • 150
  • 213
1

Selectors Level 4 draft defines the subject of a selector, which allows you to use

!* > a[href$="what"] {  }
!* + a[href$="what"] {  }

However, AFAIK browsers don't support it yet.

And also note it's a feature of the complete Selectors profile, so it isn't extremely performance sensitive.

Oriol
  • 274,082
  • 63
  • 437
  • 513
  • "And also note it's a feature of the complete Selectors profile" which means you won't be able to use it in CSS the way you are demonstrating. The question is about doing it in JavaScript, where the complete profile is expected to be implemented anyway... – BoltClock Mar 26 '14 at 22:29
0

With JavaScript it's easy:

var comments = [].slice.call(document.querySelectorAll('a[href$="what"]'))
      .map(function(el){ return el.parentNode; })
      .filter(function(el){ return el.classList.contains('comment-body'); });

It does:

  1. Get all those anchors with querySelectorAll, and convert the resulting NodeList into an Array.
  2. Create a new array in which each element is the parentNode of the corresponding element in the previous array.
  3. Filter to remove elements that don't contain comments, e.g., the link at the bottom of your questions.
Oriol
  • 274,082
  • 63
  • 437
  • 513
0

Install Greasemonkey and then click this link to install the script.

The script makes use of jQuery and its body has only one line: 

$('.comment:has(a.comment-user[href$="/what"])').remove()

Explanation: The code above can remove any element that is of class comment and has as its descendant a link that is of class comment-user and ends with /what.

zanetu
  • 3,740
  • 1
  • 21
  • 17