Snippet to hide completed tasks in Live Preview?

Custom CSS & Theme Design
1

I couldn’t adapt this snippet, which works in reading mode, for Live Preview. Any help? :pray:

.markdown-preview-view ul > li.task-list-item.is-checked {
  display: none;
}

The snippet must hide both the tasks and any of their children.

Yes, there’s a plugin for that™ but I don’t like to rely on community plugins when it could be accomplished w/ a few lines of CSS.

2

This snippet works for me:

/* Hide done tasks. Marked as "X" */
/* Edit mode*/
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="x"],
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="X"] {
  display: none;
}

/* Reading mode */
ul > li.task-list-item[data-task="x"],
ul > li.task-list-item[data-task="X"] {
  display: none;
}

… but I have a problem when I want to apply this only to certain notes through “cssclasses”.

I am not sure if you can achieve to hide also children, as they’re rendered as separate elements, just with styled indent.

Cheers, Marko

3

Thanks. The original snippet for reading view hides all children. I wonder why the same can’t be achieved in Live Preview :thinking:

I wonder if the Tasks plugin can help with this…