Contents
How to hide parent but children still visible in JavaScript?
But after you add the cloned child elements and then hide the parent DIV, NONE of the cloned child elements disappears! I have already tried placing the child to be cloned inside the parent DIV before running the duplicating script… it makes no difference.
How to display child element when parent element is display?
No, this is not possible. You could instead move the child element out of its hidden parent and insert it somewhere else in the markup (e.g. via JavaScript). That will keep .hidden-container displayed, but everything except .show-again container will have display property set to none.
How to hide the contents of the parent element?
Using this method you can hide the contents of the parent element but show the specific you want. The only caveat is the parent markup will still take up screen real estate. Just won’t be shown to the user.
How to prevent the parent from receiving the click event?
Prevent the parent from receiving itself or it children’s click event: parent.addEventListener (‘click’,function (e) { e.stopPropagation (); console.log (‘event on parent or childs!’, e.target.closest (‘.parent_selector’)) }); e.stopPropagation means that stop next ones in the hierarchy to receive the event.
Make the inner div (the one that you want to see) position: relative and give it the highest z-order. main div starts out as hidden. When the page loads, position the covering image and make the main div visible. Since the div is a lower z order it will be behind the covering image so not visible.
Where is the child Div in CSS Stack Overflow?
Since the div is a lower z order it will be behind the covering image so not visible. However, the inner div has a higher z-order again and will be visible. The benefit of this approach is that the structure and position of the main div and child elements can remain unchanged throughout.