添加和删​​除类 javascript（无 jquery）

Question

当单击下一个元素时，任何人都可以帮助删除该类。

for (i = 1; i <= 6; i++) {
  var divContainer = document.getElementById(i.toString());
  divContainer.addEventListener("click", function(event) {
    const audio = document.getElementById('audio_' + event.target.id);
    audio.play();
    const picActive = document.getElementById(event.target.id);
    picActive.className += " active";
  });
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="keys">
  <div id="1" class="key">
    <img id="1" src="images/cow.png" alt="Cow" height="180" width="180">
    <span class="sound">Cow</span>
    <audio id="audio_1" src="sounds/moo.mp3"></audio>
  </div>
  <div id="2" class="key">
    <img id="2" src="images/sheep.png" alt="Sheep" height="180" width="180">
    <span class="sound">Sheep</span>
    <audio id="audio_2" src="sounds/baa.mp3"></audio>
  </div>
  <div id="3" class="key">
    <img id="3" src="images/pig.png" alt="Pig" height="180" width="180">
    <span class="sound">Pig</span>
    <audio id="audio_3" src="sounds/grunt.mp3" />
  </div>
</div>

我应该如何从一个被点击的元素中删除“活动”类并将其添加到下一个被点击的元素中？先感谢您。

Answer 1

 for (i = 1; i <= 3; i++) {
     var divContainer = document.getElementById(i.toString());
     divContainer.addEventListener("click", function(event) {
         const audio = document.getElementById('audio_' + event.target.id);
         audio.play();
         for (j = 1; j <= 3; j++) {
             document.getElementById(j.toString()).classList.remove("active");
         };
         const picActive = document.getElementById(event.target.id);
         picActive.className += " active";
     });
 };