How to remove class from all but this using javascript?

<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

When you click on item he needs to add the class active, and the rest to clean it up if there is
jquery would do something like this:
$('.item').click(function(){
if(!$(this).hasClass('active')){
$(this).siblings().removeClass('active');
$(this).addClass('active');
}
});
June 5th 19 at 21:34
4 answers
June 5th 19 at 21:36
Solution
const wrapObj = document.querySelector('.container');
wrapObj.onclick=function(e){
 for(let i = 0;i<wrapobj.children.length;i++){ wrapobj.children[i].classlist.remove('active'); } e.target.classlist.add('active'); }< code></wrapobj.children.length;i++){>
June 5th 19 at 21:38
Solution
Here and increased generation, which can in JQ, but can't in JavaScript - Kameron_Hilpert34 commented on June 5th 19 at 21:41
I understand that the work will be in ES6
what will be in ES5? - verona_Gutkowski commented on June 5th 19 at 21:44
also will, nothing specific.
Visit the babel website, paste your code and see what Campillos. - Kameron_Hilpert34 commented on June 5th 19 at 21:47
, https://babeljs.io/repl/#?babili=false&browsers=&b... - Kameron_Hilpert34 commented on June 5th 19 at 21:50
in es8 brought method forEach for nodeList :) - catherine commented on June 5th 19 at 21:53
, amazing ))) - Kameron_Hilpert34 commented on June 5th 19 at 21:56
Where is the generation, if it's about the time spent on native js. For what ? - Frederick.Gislason40 commented on June 5th 19 at 21:59
in the sense spent?
I just do not understand how you can fumble in jQuery, but not knowing the native.
It is the same in the reverse order to learn a must. - Kameron_Hilpert34 commented on June 5th 19 at 22:02
Easily. Personally, I learned more or less the JS just after the JQuery. I was stupid the $(), .data(), addClass, slideDown, click(), and t d, long js-counterparts, - Pablo63 commented on June 5th 19 at 22:05
could you tell me please, what's the difference?
If use is querySelectorAll - getElementsByClassName
Not all classes removes
var selected = gameContainer.querySelectorAll('.selected');
 if(selected.length == 2){
 for(let i=0;i<selected.length;i++){ selected[i].classlist.remove('selected'); } console.log(selected.length); this.classlist.add('selected');< code></selected.length;i++){>
- verona_Gutkowski commented on June 5th 19 at 22:08
I have getElementsByClassName works just fine. Wang what you don't know how the selector should look like in each case. For getElementsByClassName have ONLY the class name without . in the beginning. - Kameron_Hilpert34 commented on June 5th 19 at 22:11
, of course, removes only one class, not 5 or 10 - verona_Gutkowski commented on June 5th 19 at 22:14
and where there is more than one class is taken? Let's sandbox. - Kameron_Hilpert34 commented on June 5th 19 at 22:17
June 5th 19 at 21:40
$('.item').click(function(){
$('.item').removeClass('active');
$(this).addClass('active');
});


https://jsfiddle.net/ouodkeLn/
need JavaScript, not jquery
I have about the same thing and written - Kameron_Hilpert34 commented on June 5th 19 at 21:43
June 5th 19 at 21:42
$('.item').click(function(){
$(this).addClass("active");
$(".item").not(this).removeClass("active");
}

Find more questions by tags JavaScript