title: Compared with Vanilla JavaScript, does jQuery simplify selecting related nodes?
body: <p>In my experience, jQuery simplifies DOM navigation immensely as when compared to using pure JavaScript.</p>
  <p>Suppose I have two elements <code>#parentA</code> and <code>#parentB</code> and both these two elements have similar children nodes <code>.x</code> <code>.y</code> <code>.z</code>.</p>
  <p>Often times, when I use JavaScript without jQuery, if I want to select <code>#parentA</code>'s <code>.x</code> I end up  accidentally selecting both <code>#parentA .x</code> as well as <code>#parentB.x</code>.</p>
  <p>I suppose this is more of a backend developer's therapy session where I am just letting out my frustration with JS rather than asking a question.</p>
  <p>The main reason why I am trying to avoid using jQuery is that I am trying to keep the website page weight as low as possible. What would the JavaScript equivalent be of the jQuery code I have below?</p>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;h2&gt;Colour 1&lt;/h2&gt;
  &lt;div id=&quot;hairColor&quot; class=&quot;color-palette&quot;&gt;
    &lt;ul&gt;
      &lt;li style=&quot;background: #fc4c4f;&quot;&gt;&lt;/li&gt;
      &lt;li style=&quot;background: #4fa3fc;&quot;&gt;&lt;/li&gt;
      &lt;li style=&quot;background: #ecd13f;&quot;&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;h2&gt;Colour 2&lt;/h2&gt;
  &lt;div id=&quot;skinColor&quot; class=&quot;color-palette&quot;&gt;
    &lt;ul&gt;
      &lt;li style=&quot;background: #fc4c4f;&quot;&gt;&lt;/li&gt;
      &lt;li style=&quot;background: #4fa3fc;&quot;&gt;&lt;/li&gt;
      &lt;li style=&quot;background: #ecd13f;&quot;&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>SCSS</strong></p>
  <pre><code>.color-palette {
    background: #384047;
    min-height: 60px;
    margin: 0 auto;
    width: 100%;
    border-radius: 5px;
    overflow: hidden;
    ul {
      list-style: none;
      margin: 0;
      float: left;
      padding: 10px 0 20px;
      width: 100%;
      text-align: center;
      li {
        display: block;
        height: 54px;
        width: 54px;
        border-radius: 60px;
        cursor: pointer;
        border: 0;
        box-shadow: 0 3px 0 0 #222;
        display: inline-block;
        margin: 0 5px 10px;
      }
      .selected {
        border: 7px solid #fff;
        width: 40px;
        height: 40px;
      }  
    }
  }
  </code></pre>
  <p><strong>JS</strong></p>
  <pre><code>$(&quot;.color-palette&quot;).on(&quot;click&quot;, &quot;li&quot;, function(){
    $(this).siblings().removeClass(&quot;selected&quot;);
    $(this).addClass(&quot;selected&quot;);
    color = $(this).css(&quot;background-color&quot;);
  });
  
  // What would the equivalent code be using vanila JavaScript?
  // var colors = document.querySelectorAll(&quot;#hairColor ul li&quot;);
  </code></pre>