How to add class to parent in javascript?

Question

Not jQuery as I would simply do $("this").parent().addClass("active"); but in pure javascript. This is because i don't want to mix up Javascript and jQuery on the following 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')) > -1 ? 'add' : 'remove'; 
    btn.classList[method]('active');
    //btn.parent().addClass("active");
});

UPDATE

This is the HTML starting case before the classes are added:

<ul>
  <li>1500</li>
  <li>1400
      <ul>
        <li>1401</li>
      </ul>
  </li>
</ul>

We have 2 situations:

1500 is single and doesn't have a child
1400 has a child 1401

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

btn.parentNode.classList[method]('active');

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

<ul>
  <li class="active">1500</li>
  <li>1400
      <ul>
        <li>1401</li>
      </ul>
  </li>
</ul>

Or

<ul>
  <li>1500</li>
  <li class="active">1400
      <ul>
        <li class="active">1401</li>
      </ul>
  </li>
</ul>

you would be looking for `btn.parentNode` instead of `btn.parent()` if I am reading your code right. — Jhecht, Nov 19 '16 at 22:19

score 29 · Accepted Answer · answered Nov 19 '16 at 22:19

29

You mention " i don't want to mix up js and jQuery on the following code" but you are actually mixing vanilla DOM APIs with jQuery methods. .parent and .addClass are jQuery functions. You can code:

btn.parentNode.classList.add("active");

answered Nov 19 '16 at 22:19

Ram

143,282
16
168
197

this is providing the class to all parents tho – rob.m Nov 19 '16 at 22:27
`.parentNode` returns just one DOM element. – Ram Nov 19 '16 at 22:28
i want to show it to you, how can we go to the chat? – rob.m Nov 19 '16 at 22:29
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/128549/discussion-between-rob-m-and-undefined). – rob.m Nov 19 '16 at 22:30

score 6 · Answer 2 · answered Nov 19 '16 at 22:26

6

Also consider parentElement as an alternative to parentNode:

btn.parentElement.classList.add("active");

answered Nov 19 '16 at 22:26

Bardy

2,100
1
13
11

1

what's the difference? – rob.m Nov 19 '16 at 22:28
parentNode vs parentElement: https://stackoverflow.com/questions/8685739/difference-between-dom-parentnode-and-parentelement – Mario Jul 16 '18 at 08:31

score 1 · Answer 3 · answered Nov 19 '16 at 22:19

You need .parentNode on the element.

Something like this.

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')) > -1 ? 'add' : 'remove';
  btn.classList[method]('active');
  btn.parentNode.classList.add("active");
});

How to add class to parent in javascript?

3 Answers3