Как удалить класс у всех кроме this на javascript?

Question

[lexstile]

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

При клике на item нужно ему добавлять класс active, а у остальных его убирать, если есть
на jquery бы сделал примерно так:

$('.item').click(function(){
if(!$(this).hasClass('active')){
$(this).siblings().removeClass('active');
$(this).addClass('active');
}
});

Answer 1

[Иван]

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');
  
}

Answer 2

[Алексей Ярков]

https://jsfiddle.net/porv82x1/1/

Comments

[Алексей Ярков]

Вот и выросло поколение, которое может в JQ, но не может в JavaScript

[lexstile]

Алексей Ярков, я так понимаю, что работать будет в ES6
а как будет в ES5?

[Алексей Ярков]

lexstile, также и будет, ничего специфичного.
Заходите на сайт babel, вставляете свой код и смотрите во что скомпилилось.

[Алексей Ярков]

lexstile, https://babeljs.io/repl/#?babili=false&browsers=&b...

[Иван]

Алексей Ярков, в es8 завезли метод forEach для nodeList :)

[Алексей Ярков]

Иван, восхитительно )))

[boga-net]

Алексей Ярков, Причём здесь поколение, если речь о затраченном времени на нативный js. Ради чего ?

[Алексей Ярков]

boga-net, в смысле затраченном?
Я не понимаю просто как можно шарить в жиквери, но не уметь в нативный.
Оно же в обратном порядке учиться должно.

[Anton Mashletov]

Алексей Ярков, Легко. Лично я выучил более-менее JS, только после JQuery. Мне тупо удобнее $(), .data(), addClass, slideDown, click(), и т д, чем длинные js-аналоги,

[lexstile]

Алексей Ярков, не подскажешь, пожалуйста, в чем разница?
Если использую вместо querySelectorAll - getElementsByClassName
Не все классы удаляет

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');

[Алексей Ярков]

lexstile, у меня с getElementsByClassName прекрасно работает. Вангую что вы не знаете как селектор должен выглядеть в каждом случае. Для getElementsByClassName надо ТОЛЬКО имя класса без . в начале.

[lexstile]

Алексей Ярков, разумеется, убирает только один класс, а не 5 или 10

[Алексей Ярков]

lexstile, а откуда там больше одного класса берется? Давайте песочницу.

Answer 3

[Jumandjilos]

$('.item').click(function(){
$(this).addClass("active");
$(".item").not(this).removeClass("active");
}

Answer 4

[boga-net]

$('.item').click(function(){
	$('.item').removeClass('active');
	$(this).addClass('active');
});

https://jsfiddle.net/ouodkeLn/

Comments

[lexstile]

нужен JavaScript, а не jquery
у меня примерно то же самое и написано