Onclick — как добавить и убрать класс при нажатии у одного элемента из списка?

Question

[wonder_uix]

Есть список и рядом ссылки. Как при нажатии на ссылку добавить класс (например active) элементу из списка по id и убрать его если нажата другая ссылка с другим id?

<ul class="list">
  <li id="item1"> text 1 </>
  <li id="item2"> text 2 </>
  <li id="item3"> text 3 </>
</ul>
<div class="links">
  <a href="#item1"> add class to text 1 </a>
  <a href="#item2"> add class to text 2 </a>
  <a href="#item3"> add class to text 3 </a>
</div>

Смог сделать такой вариант с onclick но это только для единичного элемента

<a href="#item1" onclick="activeList()" > add class to text 1 </a>

function activeList() {
  document.getElementById('item1').classList.add('active');
};

Answer 1

[MrColdCoffee]

<a href="#item1" onclick="activeList(event,this)" > add class to text 1 </a>
  <a href="#item2" onclick="activeList(event,this)"> add class to text 2 </a>
  <a href="#item3" onclick="activeList(event,this)" > add class to text 3 </a>

function activeList(e,element) {
	e.preventDefault();
	let li_id = element.getAttribute('href').substr(1);		
	document.querySelectorAll('.list li').forEach( (item)=>{		
		item.classList.toggle("active", item.id == li_id  );
	});
}

Answer 2

[Rsa97]

Answer 3

[Danny Arty]

Вы кстати забыли закрыть теги <li>