How to add class to parent in javascript?
<p>Not jQuery as I would simply do <code>$("this").parent().addClass("active");</code> but in pure <strong>javascript</strong>. This is because i don't want to mix up Javascript and jQuery on the following code:</p>

<pre><code>var clickedPath = this.getElement(); 
clickedPath.classList.add("active"); 
var classes = clickedPath.getAttribute('class').match(/\d+/g) || []; 
buttons.forEach(function(btn) { 
    var method = classes.indexOf(btn.getAttribute('data-date')) &gt; -1 ? 'add' : 'remove'; 
    btn.classList[method]('active');
    //btn.parent().addClass("active");
});
</code></pre>

<blockquote>
  <p><strong>UPDATE</strong></p>
</blockquote>

<p>This is the HTML starting case before the classes are added:</p>

<pre><code>&lt;ul&gt;
  &lt;li&gt;1500&lt;/li&gt;
  &lt;li&gt;1400
      &lt;ul&gt;
        &lt;li&gt;1401&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>We have 2 situations:</p>

<ul>
<li>1500 is single and doesn't have a child</li>
<li>1400 has a child 1401</li>
</ul>

<p>If I am adding the class <code>active</code> to 1500, it's fine and I can use the code provided in the answer:</p>

<pre><code>btn.parentNode.classList[method]('active');
</code></pre>

<p>But If I add the class to 1401, also 1400 should have it, so the followings are the two cases:</p>

<pre><code>&lt;ul&gt;
  &lt;li class="active"&gt;1500&lt;/li&gt;
  &lt;li&gt;1400
      &lt;ul&gt;
        &lt;li&gt;1401&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>Or</p>

<pre><code>&lt;ul&gt;
  &lt;li&gt;1500&lt;/li&gt;
  &lt;li class="active"&gt;1400
      &lt;ul&gt;
        &lt;li class="active"&gt;1401&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;
</code></pre>