Raw javascript: add class to parentNode and remove from siblings

Question

I have a click event that adds an active class to the link's parentNode. On click the active class should be removed from the siblings of the parentNode. This is the code so far:

categories = document.querySelectorAll('.categories');

for(var i = 0; i < categories.length; i++) {
categories[i].onclick = function(e) {
// ('.categoriesparent').classList.remove('active');
this.parentNode.classList.add('active');

}

I tried the line that is commented out, and that breaks the adding of the class on click. Is there an equivalent to jQuery's siblings().removeClass('active')? Thanks for any help.

Here is the DOM for this section:

<div id="nav">
  <span class="categoriesparent active">
      <a class="categories">Link</a>
  </span>
  
  <span class="categoriesparent">
      <a class="categories">Link2</a>
  </span>
  
</div>

UPDATE - this is the original full code snippet:

<html>

<head></head>

<body>

<div id="nav">
  <span class="categoriesparent">
      <a href="#" class="categories">Link</a>
  </span>

<br><br>
  
  <span class="categoriesparent">
      <a href="#" class="categories">Link2</a>
  </span>
  
</div>


<script>

categories = document.querySelectorAll('.categories');

for(var i = 0; i < categories.length; i++) {
categories[i].onclick = function(e) {
// ('.categoriesparent').classList.remove('active');
this.parentNode.classList.add('active');

}

}

</script>
</body>
</html>

UPDATE after incorporating BRK's code snippet:

<html>

<head></head>

<body>

<div id="nav">
  <span class="categoriesparent active">
      <a href="#" class="categories">Link</a>
  </span>

<br><br>
  
  <span class="categoriesparent">
      <a href="#" class="categories">Link2</a>
  </span>
  
</div>


<script>

categories = document.querySelectorAll('.categories');

categories.forEach(function(cat, index) {
  cat.onclick = function(e) {
    document.querySelector('.categoriesparent.active').classList.remove('active');
    this.parentNode.classList.add('active');
  }
});

</script>
</body>
</html>

score 0 · Answer 1 · answered Mar 05 '18 at 06:28

0

Can you try doing like this? It Might help!

categories = document.querySelectorAll('.categories');

for(let i = 0; i < categories.length; i++) {
categories[i].onclick = () => {
// ('.categoriesparent').classList.remove('active');
this.parentNode.classList.add('active'); 
}

answered Mar 05 '18 at 06:28

Mohammed Gadi

381
5
18

Unfortunately it broke it and gave a white screen...thanks for your suggestion. – jamie Mar 05 '18 at 06:33
I added the full snippet above in the latest update. – jamie Mar 05 '18 at 16:47

score 0 · Answer 2 · edited Mar 05 '18 at 17:19

Inside the onclick handler you can again use document.querySelector('.categoriesparent.active') . This will return the first matched element and then use classList.remove to remove the active class from it.

this.parentNode refers to the element in context

var categories = document.querySelectorAll('.categories');

categories.forEach(function(cat, index) {
  cat.onclick = function(e) {
    document.querySelector('.categoriesparent.active').classList.remove('active')
    this.parentNode.classList.add('active');

  }
})

.active {
  color: red;
}

<div id="nav">
  <span class="categoriesparent active">
          <a class="categories">Link</a>
      </span>

  <span class="categoriesparent">
          <a class="categories">Link2</a>
      </span>

</div>

Update from Jamie:

I used your suggestion like so:

<html>

<head></head>

<body>

<div id="nav">
  <span class="categoriesparent active">
      <a href="#" class="categories">Link</a>
  </span>

<br><br>
  
  <span class="categoriesparent">
      <a href="#" class="categories">Link2</a>
  </span>
  
</div>


<script>

categories = document.querySelectorAll('.categories');

categories.forEach(function(cat, index) {
  cat.onclick = function(e) {
    document.querySelector('.categoriesparent.active').classList.remove('active');
    this.parentNode.classList.add('active');
  }
});

</script>
</body>
</html>

I get an "Uncaught TypeError: undefined is not a function" error. Thanks for your input!

score 0 · Answer 3 · answered Mar 05 '18 at 06:42

You can first remove the active class from all the siblings of parent (and the parent itself) and then add to the parent

for (var i = 0; i < categories.length; i++) {
  categories[i].onclick = function(e) {
    [ ...getSiblingsAndMe(this.parentNode) ].forEach( el => el.classList.remove( 'active' ) );
    this.parentNode.classList.add('active');
  }
}

function getSiblingsAndMe( el )
{
   return el.parentNode.children;
}

Demo

categories = document.querySelectorAll('.categories');

for (var i = 0; i < categories.length; i++) {
  categories[i].onclick = function(e) {
    [ ...getSiblingsAndMe(this.parentNode) ].forEach( el => el.classList.remove( 'active' ) );
    this.parentNode.classList.add('active');
  }
}

function getSiblingsAndMe( el )
{
   return el.parentNode.children;
}

.categoriesparent
{
  display:block;
}

.active
{
   background-color:pink;
}

<div id="nav">
  <span class="categoriesparent active">
      <a class="categories">Link</a>
  </span>

  <span class="categoriesparent">
      <a class="categories">Link2</a>
  </span>

</div>

I plugged this snippet in and get uncaught syntax errors. Is this part a suggestion or maybe I'm just unfamiliar with the syntax? [ ...getSiblingsAndMe(this.parentNode) ] — jamie, Mar 05 '18 at 16:50

Raw javascript: add class to parentNode and remove from siblings

3 Answers3