title: Show li's including a particular string and hide does who don't
body: <p>I need to hide each li <strong>who don't end with &quot;rouges&quot;</strong>. Meaning that in this list only &quot;Fruits rouges&quot; and &quot;Haricots rouges&quot; can be displayed because it ends with &quot;rouges&quot;. This event has to occur by clicking a button, and has to be only in JS...</p>
  <pre><code>&lt;ul&gt;
    &lt;li&gt;Fruits rouges&lt;/li&gt;
    &lt;li&gt;Raisins blanc&lt;/li&gt;
    &lt;li&gt;Pomme verte&lt;/li&gt;
    &lt;li&gt;Haricots verts&lt;/li&gt;
    &lt;li&gt;Haricots rouges&lt;/li&gt;
    &lt;li&gt;Rouges gorges&lt;/li&gt;
    &lt;li&gt;Fruits exotiques rouges et verts&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  <p>Then, I need to click on another button to reset this list (show every li) only if the above filter has been used, and sort it alphabetically.</p>
  <p>I've already tried to find the matching word &quot;rouges&quot; by doing :</p>
  <pre><code>document.getElementById(&quot;bouton4&quot;).addEventListener(&quot;click&quot;, function(){
  
    const items = ['Fruits rouges', 'Raisins blanc', 'Pomme verte', 'Haricots verts', 'Haricots rouges', 'Rouges gorges', 'Fruits exotiques rouges et verts'];
    const matches = items.filter(s =&gt; s.includes('rouges'));
    console.log(matches);
  
  });
  </code></pre>
  <p>But it doesn't take in consideration the position of &quot;rouges&quot; which must be at the end.</p>
  <p>I hope you can help me to do that because i've been puzzling over that for quite some hours now lol,
  thanks a lot.</p>