Hay un elemento por desbloqueo de nombre de clase y por evento de clic, el HTML interno de eso será cambiado por otro ícono svg. funciona bien y se reemplazó por un nuevo ícono svg.

 <div class="Panel card" id="leftSidebarForm"> <div class="Panel card-subtitle"> <div class="column"> <div class="unlock"> <svg>1</svg> </div> <div class="Panel"> <svg>1</svg> </div> <div class="unchain"> <svg>2</svg> </div> <div class="Panel"> <svg>3</svg> </div> </div> </div> </div>

Pero defino un EventListener en el document para cerrar el elemento anterior al hacer clic en el exterior.

 document.addEventListener("click", function (event) { if (document.getElementById('leftSidebarForm') != null && !event.target.closest('#leftSidebarForm') && !event.target.closest('#left-sidebar-menu') ) { // do something } });

El problema ocurre al hacer clic en svg 1 para cambiar el ícono, cierra el leftSidebarForm de la barra lateral izquierda mientras es su padre y no debe cerrar el leftSidebarForm de la barra lateral izquierda. Al hacer clic en el icono svg para cambiar su contenido, este fragmento de código devuelve null

 event.target.closest('#leftSidebarForm')

Creo que es porque al cambiar el HTML interno del elemento lo eliminamos de dom y innerHTML event.target.closest('#leftSidebarForm') devuelve nulo porque ese svg no existe.

¿Cómo puedo solucionar ese problema?