Así que estoy creando varios divs secundarios nuevos dentro de otro div principal con este código:
var parentDiv = document.querySelector('.parent-div') const newDiv = document.createElement('div'); parentDiv.appendChild(newDiv); Entonces, ahora quiero agregar un evento onlick para cada div que creé, que restablece el color para cada otro div dentro del div principal, de modo que no se seleccionen varios div secundarios, y luego establezca el color solo para el div en el que se hizo clic en otro color !
¿Algunas ideas?
var parentDiv = document.querySelector('.parent-div'); for (let i = 0; i < 10; ++i) { const newDiv = document.createElement('div'); newDiv.className = "my-class"; newDiv.innerText = `Foo${i}`; parentDiv.appendChild(newDiv); } parentDiv.onclick = (event) => { document.querySelectorAll('.my-class').forEach((el) => { el.className = "my-class"; }); event.target.className += " active"; } .my-class { color: red; } .active { color: blue; } <div class="parent-div"></div>Solo para sugerir una forma más robusta y flexible:
// Utility functions const EL = (sel, EL) => (EL||document).querySelector(sel); const ELS = (sel, EL) => (EL||document).querySelectorAll(sel); const ELNew = (tag, prop) => Object.assign(document.createElement(tag), prop); // Now... // Get element (Use an ID, not a class) const EL_parent = EL('#parent'); // Function to toggle "is-active" class const toggleActive = (EL_target, EL_parent) => { const EL_active = EL(".is-active", EL_parent); if (EL_active) EL_active.classList.remove("is-active"); EL_target.classList.add("is-active"); }; // Function to create new child elements const newChild = (content) => ELNew("div", { className: "child", innerHTML: content, onclick() { toggleActive(this, EL_parent); } }); // Create a couple of elements.... EL_parent.append( newChild("1 Lorem"), newChild("2 Ipsum"), newChild("3 Dolor"), ); .is-active { background: gold; } <div id="parent"></div> Entonces, solo una mejor manera, y para evitar un código descuidado como className = o Event.target sin el uso de .closest() , como se muestra en las otras respuestas.
let parentDiv = document.querySelector('.parent-div'); for (let x = 0; x < 10; x++) { let newDiv = document.createElement('div'); newDiv.classList.add('see') parentDiv.appendChild(newDiv); } parentDiv.addEventListener('click', (e) => { if (e.target.tagName === 'DIV') { e.target.style.backgroundColor = 'red'; } })