Add or Remove class automatically in HTML

Question

I want to Add a class in these list items but the condition is if I add a (active) class in a particular list item

let getList=document.querySelectorAll("li")


getList.forEach(li=>{

    li.addEventListener("click", function(){
    
      li.classList.add("active")
    
    })
})

.list-item{
  height:80px;
  width:70px;
  background-color:black
}

.list-item li{
  color:white
}
.active{
  border:5px soild blue;
  list-style:none; 
  color:orange;
  
}

<body>
<ul class="list-item">
  
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
  
</ul>


</body>

The previous active class in list tag must be removed automatically

"The previous active class in list tag must be removed automatically" Can you share your previous attempt at achieving this, along with where specifically in that attempt you're getting stuck, so that the community might be able to point out where you've gone wrong? — esqew
– esqew, Commented Aug 20, 2020 at 15:06
You can also find more information on this post: stackoverflow.com/questions/63485090/… — Thaeke Hekkenberg
– Thaeke Hekkenberg, Commented Aug 20, 2020 at 15:08

daddygames · Accepted Answer · 2020-08-20 15:07:26Z

7

You just need to remove the "active" class from any <li> element that already has it set. Otherwise you end up with the "active" class on multiple elements. Here is one way to do that:

let getList=document.querySelectorAll("li")


getList.forEach(li=>{

    li.addEventListener("click", function(){
    
      // remove class from any currently active elements
      getList.forEach(li => { li.classList.remove("active"); });
    
      // then add the active class to the selected element
      li.classList.add("active")
    
    })
})

.list-item{
  height:80px;
  width:70px;
  background-color:black
}

.list-item li{
  color:white
}
.active{
  border:5px soild blue;
  list-style:none; 
  color:orange;
  
}

<body>
<ul class="list-item">
  
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
  
</ul>


</body>

answered Aug 20, 2020 at 15:07

daddygames

1,9381 gold badge12 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nathaniel Tagg · Accepted Answer · 2020-08-20 15:10:29Z

1

This is the sort of thing that is easy in jquery.

    $('ul.list-item li').on('click',function(){
      $('ul.list-item li').removeClass('active');
      $(this).addClass('active')
    }

This is nice because the selector format 'ul.list-item li' specifically excludes any other 'li' items on your page.

Without jquery you can still do this. In your function, loop through all the other li elements again and this time remove the active class.

answered Aug 20, 2020 at 15:10

Nathaniel Tagg

4154 silver badges15 bronze badges

1 Comment

Ishan Ahmed Over a year ago

its good way too..but I want to it with vanilla javascript

mplungjan · Accepted Answer · 2020-08-20 15:09:36Z

0

Delegation is cleaner

const list = document.querySelectorAll(".list-item li");
document.querySelector(".list-item").addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.tagName === "LI") {
    list.forEach(li => li.classList.remove("active"));
    tgt.classList.add("active");
  }
});

.list-item {
  height: 80px;
  width: 70px;
  background-color: black
}

.list-item li {
  color: white
}

.active {
  border: 5px soild blue;
  list-style: none;
  color: orange;
}

<ul class="list-item">
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ul>

answered Aug 20, 2020 at 15:09

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Comments

Axel Moriceau · Accepted Answer · 2020-08-20 15:12:18Z

0

you should use the onclick event and proceed like this ->

Remove every active class from the <li></li> in the <ul></ul>
Add the active class to the target element

answered Aug 20, 2020 at 15:12

Axel Moriceau

1568 bronze badges

Comments

Derek Wang · Accepted Answer · 2020-08-20 15:13:34Z

0

Update the script like this.

let getList = document.querySelectorAll('li');
let prevLi = null;
getList.forEach(li => {
    li.addEventListener('click', function () {
        if (prevLi != null) {
            prevLi.classList.remove('active');
        }
        li.classList.add('active');
        prevLi = li;
    });
});

.list-item{
  height:80px;
  width:70px;
  background-color:black
}

.list-item li{
  color:white;
}
.active{
  border:5px soild blue;
  list-style:none; 
  color:orange !important;
  
}

<ul class="list-item">
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>

answered Aug 20, 2020 at 15:13

Derek Wang

10.2k4 gold badges20 silver badges40 bronze badges

Collectives™ on Stack Overflow

Add or Remove class automatically in HTML

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related