'I want to remove class from first element while adding in other element using JavaScript

I have four div with image and I want to add a class .open when clicked on the panel and remove this class from last div when clicked on another div.

 <div class="panel panel1">
    image..
  </div>
  <div class="panel panel2">
    image..
  </div>
  <div class="panel panel3">
    image..
  </div>
  <div class="panel panel4">
    image..
  </div>
  <div class="panel panel5">
    image..
  </div>

Qhen we add open class list this image container grows 5 time so, I want to remove this class when click on other image container:

.panel.open {
    font-size: 40px;
    flex: 5;
  }



  const panel = document.querySelectorAll(".panel");
  function toggleOpen() {
    this.classList.toggle("open");
  }

  function toggelActive() {
    this.classList.add("open-active");
  }

  panel.forEach((panel) => panel.addEventListener("click", toggleOpen));
  panel.forEach((panel) => panel.addEventListener("transitionend", toggelActive));

Solution 1:^[1]

when you use querySelectorAll the result you will get will be a NodeList, you can access the elements via index and change them.

const divs = document.querySelectorAll("div");

console.log(divs[divs.length - 1]);

divs[divs.length - 1].classList.add("active");

.active {
  font-size: 30px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>

  <script src="./script.js"></script>
</body>
</html>

If you give a more detailed description of the logic you want to implement, maybe I can help you better.

Remembering that to access the first element the index is 0

Solution 2:^[2]

I think you could give us more details, but if you just want to close an image when you open another one, you can just remove all "open" classes from your panels, like:

const panel = document.querySelectorAll(".panel");
function toggleOpen(element) {
  element.classList.toggle("open");
}

function toggelActive(element) {
  element.classList.add("open-active");
}

/**
 * Remove all open classes from your panel
 */
function removeAll() {
  panel.forEach((panel) => {
    panel.classList.remove("open", "open-active")
  })
}

panel.forEach((panel) => panel.addEventListener("click", event => {
  /* First remove all classes */
  removeAll();
  toggleOpen(event.target)
}));
panel.forEach((panel) => panel.addEventListener("transitionend", event => {
  /* First remove all classes */
  removeAll();
  toggelActive(event.target)
}));

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Santiago Monteiro
Solution 2	Eduardo Delduqui

'I want to remove class from first element while adding in other element using JavaScript

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]