Este código agrega una clase (un borde en este caso) a un solo elemento (un cuadrado) cuando el usuario hace clic en ese elemento. Esta parte del código está funcionando bien.
Luego, me gustaría poder eliminar la cantidad de bordes que se agregaron (1-3 en este ejemplo), con el clic de un solo botón, usando un bucle for.
Pude eliminar los bordes simplemente repitiendo item1.classList.remove('.bigBorder'); (por ejemplo, con item1) pero eso ciertamente no escala bien.
const item = document.querySelector('.item'); const item1 = document.querySelector('.item1'); const item2 = document.querySelector('.item2'); const item3 = document.querySelector('.item3'); const clearBordersButton = document.querySelector('.clearBorders'); const bigBorder = document.querySelector('.bigBorder'); item1.addEventListener('click', function() { item1.classList.add('bigBorder'); }); item2.addEventListener('click', function() { item2.classList.add('bigBorder'); }); item3.addEventListener('click', function() { item3.classList.add('bigBorder'); }); clearBordersButton.addEventListener('click', clearBorders); function clearBorders() { for (let i = 0; i < item.length; i++) { item[i].classList.remove('bigBorder'); } }; * { box-sizing: border-box; } .container { width: 960px; margin: 20px auto; border: 1px solid black; } .boxes { display: flex; justify-content: space-around; border: 1px solid black; } .item1, .item2, .item3 { border: 2px solid blue; margin: 20px 0; width: 100px; height: 100px; } .bigBorder { border: 10px solid black; } <div class="container"> <div class="boxes"> <div class="item item1">item</div> <div class="item item2">item</div> <div class="item item3">item</div> </div> <button class="clearBorders">clear borders</button> </div>En lugar de adjuntar un oyente a cada item , puede usar la delegación de eventos : adjunte un oyente al componente principal ( .boxes ) y haga que escuche los eventos a medida que "burbujean" el DOM de sus hijos.
Si también selecciona todos los item elemento con querySelectorAll , iterar sobre ellos y eliminar la clase es un proceso simple.
// Cache the elements const boxes = document.querySelector('.boxes'); const items = document.querySelectorAll('.item'); const clear = document.querySelector('.clear'); // Add listeners to the container, and the button boxes.addEventListener('click', handleClick, false); clear.addEventListener('click', clearBorders, false); // Because we're using event delegation // check that the child element that was clicked // on was has a `.item` class, and then add the new class function handleClick(e) { if (e.target.matches('.item')) { e.target.classList.add('bigBorder'); } } function clearBorders() { items.forEach(item => { item.classList.remove('bigBorder'); }); }; .boxes{display:flex;justify-content:space-around;width:250px} .item{display:flex;justify-content:center;align-items:center;background-color:#efefef;border:10px solid white;margin:20px 0;width:50px;height:50px} .item:hover{cursor:pointer;background-color:#cdcdcd;} .bigBorder{border:10px solid #000} <div class="boxes"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> <button class="clear">clear borders</button>Es importante tener en cuenta que querySelector devuelve el primer elemento coincidente, mientras que querySelectorAll devuelve una lista de nodos de elementos coincidentes.
Podemos usar la lista de nodos para asignar la lista de eventos y eliminar la clase.
//Selects multimple itmes const items = document.querySelectorAll('.item'); //selects first matching itme const clearBordersButton = document.querySelector('.clearBorders'); const bigBorder = document.querySelector('.bigBorder'); //Iterate the items items.forEach(function(element){ //add an event listern element.addEventListener("click", function(){ //"this" is the item clicked this.classList.add("bigBorder"); }) }) clearBordersButton.addEventListener('click', clearBorders); function clearBorders() { //find the elements document.querySelectorAll(".item.bigBorder").forEach(function(element){ //remove the class element.classList.remove("bigBorder"); }) }; * { box-sizing: border-box; } .container { width: 960px; margin: 20px auto; border: 1px solid black; } .boxes { display: flex; justify-content: space-around; border: 1px solid black; } .item1, .item2, .item3 { border: 2px solid blue; margin: 20px 0; width: 100px; height: 100px; } .bigBorder { border: 10px solid black; } <div> <div class="container"> <div class="boxes"> <div class="item item1">item</div> <div class="item item2">item</div> <div class="item item3">item</div> </div> <button class="clearBorders">clear borders</button> </div> </div>