Quiero simplificar este código.
let a = document.querySelector(".arrow"); b = document.querySelector(".demo-desc1"); c = document.querySelector(".demo-title h3"); a.style.display = "none"; b.style.display = "none"; c.style.display = "none";así que no tengo que escribir style.display = "none" para cada variable, sino aplicar la propiedad para todas las variables a la vez.
Gracias.
Si solo hay un elemento de cada uno en el DOM, colóquelos todos en una cadena de selector y luego itere sobre los elementos coincidentes.
for (const elm of document.querySelectorAll('.arrow, .demo-desc1, .demo-title h3')) { elm.style.display = 'none'; }Si hay varios elementos de este tipo, necesitará
const selectors = ['.arrow', '.demo-desc1', '.demo-title h3']; for (const s of selectors) { document.querySelector(s).style.display = 'none'; }Pero, en este tipo de situación, un enfoque aún mejor sería alternar una clase de un contenedor principal y tener reglas CSS que oculten esos elementos cuando la clase está en el contenedor principal. No sé cómo es el resto de su HTML, pero tal vez algo como
<div class="demo-container"> <more HTML here> </div> .hide-children .arrow, .hide-children .demo-desc1, .hide-children .demo-title h3 { display: none; }Entonces todo lo que necesitas es
document.querySelector('.demo-container').classList.add('hide-children');