# Using CSS to suppress vote options from view results with zero votes
**URL:** https://meta.discourse.org/t/using-css-to-suppress-vote-options-from-view-results-with-zero-votes/105275
**Category:** Development
**Created:** [12월 29, 2018, 5:55오후 UTC](https://meta.discourse.org/t/using-css-to-suppress-vote-options-from-view-results-with-zero-votes/105275 "2018-12-29T17:55:55Z")
**Posts on this page:** 4
**Page:** 1
Hi meta, Help please!
**tl;dr** I’ve wracked my (limited) brain on this but with no joy. Can someone tell me how I can hide the non-chosen poll items once you’ve participated in a poll?
For example, here is a screenshot of a poll where two people have voted:
What I would like to do, once there are results to view (i.e. I’ve taken part in the poll), is to remove the entries that have not received any votes (3. and 4. in this example).
Like this.
Now, I’ll concede that I’m far from being a CSS expert, but I’ve tried everything I can think of to target the elements that represent the options that have no votes.
Here’s the HTML I’m dealing with.
```html
Here is my poll
50%This one is too (but by somebody else)
50%This will be chosen
0%And nor has this
0%But this one has not been selected by anyone
2voters
```
# What have I tried?
### Theme component CSS
I’ve tried creating a theme component with CSS to target the elements I don’t want to display and applying `display: none`.
The issue, for my very limited CSS skills, is that I want to remove the `li` child elements of `ul.results` **only** if the embedded `ul.poll-voters-list` contains an `:empty` `div.poll-voters`.
i.e. I want to apply `display: none` to the `li` based on whether a grandchild `div` is empty.
```plaintext
li -> Hide this...
ul.poll-voters-list
div.poll-voters -> ...if this has no children
```
So my selector to get to the empty `div` is something like this:
```css
.poll .results div.poll-voters:empty {
display: none;
}
```
That works fine, but I need to target the `display: none` on the `li` element two levels up.
See ` ` below:
```html
...
...
...
...
...
...
.
.
.
```
I’m sure someone with CSS/ SCSS expertise would have been able to set me right on this, but I soldiered on.
I spent a couple of days Googling and learning and found some kindred spirits who each lamented the omission of a parent selector in CSS. The general consensus seemed to be that JavaScript was the way to go.
### Theme Component JavaScript / JQuery
I did a bit of mucking around with JQuery many years ago and thought I’d be able to get what I wanted with this. I soon realised that I’m not dealing with a ‘typical’ web page in Discourse. Instead new posts are added to topics dynamically as we scroll.
So a simply JQuery might work as long as the poll was not ‘off screen’ when the page was first rendered, but as soon as a new poll was scrolled into view, my JQuery code wouldn’t fire.
So, I dug around meta and found and read the excellent [Developer’s Guide to Discourse Themes](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648) and realised I could jump on the back of the `api.decorateCooked` function to get the `div.cooked` structure each time it is added to the page.
I set out to write some code to target a `div` that is `:empty` with a class of `poll-voters` inside the `div.poll` structure, jump back up two `.parents()` and `.addClass('bletch')` so that I could then target that class with some simple CSS…
```css
.bletch {
display: none;
}
```
Well, to cut a **VERY** long story short, I had some fun, learned a lot but it **LOOKS LIKE** , the `div.cooked` structure that gets sent to the `api.decorateCooked` function for polls only includes the first level of the poll. Perhaps this is due to the dynamic nature of polls?
This made for a very frustrating time at the keyboard. Chrome’s dev tools were showing the structure and I’m looking at my code and can’t work out why I’m not able to target the elements that I can see in Chrome’s debugger!
To try to regain my sanity, I added this code to the `` section of the theme component…
```javascript
$( document ).ready(function() {
e = $('.poll .results div.poll-voters:empty');
e.parent().parent().addClass('bletch');
}
```
and sure enough I see this…
# Some questions
Is it the case that the `api.decorateCooked()` function isn’t getting the entire polls structure but that it is instead fleshed out some time after the `api.decorateCooked()` function is invoked?
Is there another function I can sit on, perhaps called after new posts have been added to the topic?
Is there a function that is called once the polls are ‘cooked’?
If any JavaScript whizzes can put my right on this I’d be very grateful.
Or, hopefully, more likely someone can suggest a simple CSS selector that would get what I want?
Any advice gratefully received.
B
---
I’m using polls to collect data for a behaviour management system at the school I work at. You’d be surprised how well Discourse works for collecting quantitative data intermingled with narrative.
As it is simply data capture about a single discrete event, in effect the first vote closes the poll.
Some of the polls have upto 60 options - when I’m asking for the minutes past the hour when an incident happened.
If the poll hasn’t been submitted I am able to use CSS to display the options inline so they don’t take up too much vertical space.
However, when there are poll results, the polls are very deep.
---
