I encountered an issue where a modal is overlapping another element, and the close button of the underlying element has a z-index of 1. Despite creating a new modal with its own close button, the original close button remains visible on top.
I attempted to hide this element in the DOM, but as it is not a parent element, I struggled to find a solution.
Edit: This is just pseudo code...My question revolves around removing an overlaid sibling element.
<div>
<div>
<img style={{z-index: 1; position: fixed;}}>close button (sibling, needs to be hidden or moved)</img>
</div>
<div>
<div>
<div>
<img style={{z-index: 1; position: relative;}}>close button (popup modal)</img>
</div>
</div>
Solved: Fortunately, simply targeting the element by its id (after assigning one) allowed me to toggle its display property regardless of its place in the DOM hierarchy. It's strange that I initially thought differently. ¯_(ツ)_/¯
const closeBtn = document.getElementById('closeBtnSibling');
closeLessonBtn.style.display = 'none';
and
closeLessonBtn.style.display = null;