Quiero seleccionar el padre del padre de un niño en Javascript sin encadenar el mismo método dos veces: child.parentElement.parentElement. ¿Hay algún método para esto? El elemento que quiero seleccionar es parent1 .
El código es solo para ilustrar el problema, pero todo lo que quiero es saber si hay un método que pueda sustituir el .parentElement.parentElement. Necesito seleccionarlo así porque mi código se introduce dinámicamente en la página.
Este es el código para ilustrar el problema:
const body = document.querySelector('body'); body.querySelector('button').addEventListener('click', function() { this.parentElement.parentElement.classList.toggle('black'); }); .parent1 { background: yellow; padding: 20px; } .parent2 { background: blue; padding: 20px; } .black { background: black; } <div class="parent1"> <div class="parent2"> <button>Click</button> </div> </div>Puede usar Element.closest() para encontrar el primer elemento principal que coincida con un selector, en nuestro caso, .parent1 :
const body = document.querySelector('body'); body.querySelector('button').addEventListener('click', function() { this.closest('.parent1').classList.toggle('black'); }); .parent1 { background: yellow; padding: 20px; } .parent2 { background: blue; padding: 20px; } .black { background: black; } <div class="parent1"> <div class="parent2"> <button>Click</button> </div> </div>