CODEWITHSUNDEEP
javascripthtmlcssforeach
Ishan Ahmed
Ishan Ahmed

Reputation: 105

Add or Remove class automatically in HTML

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

Upvotes: 1

Views: 905

Answers (5)

Derek Wang
Derek Wang

Reputation: 10204

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>

Upvotes: 0

Axel Moriceau
Axel Moriceau

Reputation: 156

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

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

Upvotes: 0

Nathaniel Tagg
Nathaniel Tagg

Reputation: 415

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.

Upvotes: 1

mplungjan
mplungjan

Reputation: 178375

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>

Upvotes: 0

daddygames
daddygames

Reputation: 1928

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>

Upvotes: 7

Related Questions