Removing classless child list item within specific parent class

Question

I am building a tampermonkey script, where I am trying to mute messages from users other than me. I have some HTML that looks like this, which is within a chat box:

<section class="mchat mchat-optional">
<div class="mchat__tabs nb_2" role="tablist">
<div class="mchat__tab discussion mchat__tab-active" role="tab">
<ol class="mchat__messages chat-v-1" role="log" aria-live="polite" aria-atomic="false">
  <li class="me"><t>Good luck!</t></li>
  <li><t>Some rude message</t></li>
  <li class="me"><t>Have fun</t></li>
  <li><t>Another rude message</t></li>
  <li class="system"><t>Black offers draw</t></li>
</ol>
</div>
</div>
</section>

List items that I want to retain have the class "me" or "system". I want to remove list items within the class "mchat__messages chat-v-1", where the child li is classless. How do I select this and remove it?

I've tried something like this, but it does not seem to work:

document.querySelectorAll('mchat__messages chat-v-1.li:not(me):not(system)').forEach(el => el.remove());

I do not want to inject any javascript. This may be why my query selector doesn't work?

Answer 1

You can do it without js.

In CSS you have :not() selector to unselect specific elements

.mchat__messages.chat-v-1 li:not(.me):not(.system) {
  display: none
}

.mchat__messages.chat-v-1 li:not(.me):not(.system) {
  display: none
}

<section class="mchat mchat-optional">
<div class="mchat__tabs nb_2" role="tablist">
<div class="mchat__tab discussion mchat__tab-active" role="tab">
<ol class="mchat__messages chat-v-1" role="log" aria-live="polite" aria-atomic="false">
  <li class="me"><t>Good luck!</t></li>
  <li><t>Some rude message</t></li>
  <li class="me"><t>Have fun</t></li>
  <li><t>Another rude message</t></li>
  <li class="system"><t>Black offers draw</t></li>
</ol>
</div>
</div>
</section>

In this case, you want to show li with class me or system. You can extend with :not() to unselect more than one class