Parent DOM (Document Object Model) 이 hidden 일 때, child element 가 update 되면 hidden 이 풀릴 때 해결법

m.logPrint() is working!

<eq> and <eqq> tags are rendered to MathJax format, being enclosed by \ ( \ ) and \ [ \ ].

docuK1 scripts started!
If this log is not closed automatically, there must be an error somewhere in your document or scripts.

Table of Contents is filled out.

Auto numberings of sections (div.sec>h2, div.subsec>h3, div.subsubsec>h4), <eqq> tags, and <figure> tags are done.

<cite> and <refer> tags are rendered to show bubble reference.

<codeprint> tags are printed to corresponding <pre> tags, only when the tags exist in the document.


Current styles (dark/bright mode, font-family, font-size, line-height) are shown.

disqus.js with id="disqus-js" is loaded.

kakao.js with id="kakao-js-sdk" is loaded.

New ShortKeys (T: Table of Contents, F: Forward Section, D: Previous Section, L: To 전체목록/[Lists]) are set.

m.delayPad=512;
m.wait=1024;
wait 1359ms.

▼ Hide

Toggle a mess

Go (FS)

TofC

DocuK Log

Backward

Forward

RRA

Lists

CmtZ

CmtX

Handle CmtZ

Log in

▲

Go: Fuzzy search

out focus

[--The following is copied!--]

이 글이 도움이 되셨다면, 광고 클릭 한번씩만 부탁드립니다 =ㅂ=ㅋ. (If this article was helpful, please click the ad once. Thank you. ;)

Dark Bright

Mode: Bright; Font: Noto Sans KR; font-size: 18.0px (10.0); line-height: 1.6;
width: 1280, height: 720, version: 3.1.1
Canonical URI: https://kipid.tistory.com/entry/Parent-DOM-Document-Object-Model-이-hidden-일-때-child-element-가-update-되면-hidden-이-풀릴-때-해결법
dg:plink (Document Global Permanent Link): https://kipid.tistory.com/310
document.referrer: Empty

This document is rendered by docuK (See also SEE (Super Easy Edit) of docuK and pure SEE).

Parent DOM (Document Object Model) 이 hidden 일 때, child element 가 update 되면 hidden 이 풀릴 때 해결법

Recoeve.net 개발하면서 목록 (ToR) 이 다른 카테고리로 옮겨갈때 갑자기 pop-up 되는 현상이 발생했는데, 이게 카테고리가 바뀌면서 목록이 update 되고 목록 (ToR) 의 child elements 가 update 되면서 발생하는 문제 같았다.

역시나 만능 ChatGPT 에 문의 결과 대충의 답의 힌트를 얻을 수 있었는데... children DOM 의 display 를 inherit 으로 하면 해결되는 문제였다.

TPH1.Posting History

▼ Show/Hide

• 2023-12-03 : First posting.

▲ Hide

Table of Contents

PH1.Posting History

1.To ChatGPT in Windows 11 :: Why is a hidden DOM shown after child elements are updated?

2.ps. LLM (Large Language Model) 이 어떻게 만들어 지는지 공부하고 있는데, 참 신기하고 대단해 보임.

RRA1.References and Related Articles

T1.To ChatGPT in Windows 11 :: Why is a hidden DOM shown after child elements are updated?

▼ Show/Hide

There are several possible reasons why a hidden DOM element is shown after child elements are updated. Some of the common ones are:

- The child elements have a CSS property that overrides the visibility of the parent element, such as visibility: visible or display: block. This can happen if the child elements are added dynamically and have a different style than the parent element. To fix this, you can use visibility: inherit or display: inherit on the child elements, which will make them follow the visibility of the parent element

[01]

Ref. [01] stackoverflow.com :: parent hidden but children still visible (I don't want them visible)!

.

- The parent element is hidden using the hidden attribute, which is a boolean attribute that indicates whether the element is relevant or not. However, some browsers may not support this attribute, or some scripts may change its value. To fix this, you can use a CSS rule that sets display: none on the elements that have the hidden attribute, which will make them hidden regardless of the browser or script. For example:

// CSS
// AI가 생성한 코드입니다. 신중하게 검토하고 사용하세요. FAQ의 자세한 정보.

[hidden] {
  display: none !important;
}

- The parent element is hidden using the opacity property, which sets the transparency of the element. However, this property does not affect the visibility of the element, only its appearance. The element still occupies space and can receive events. To fix this, you can use the visibility property or the display property instead of the opacity property, which will make the element truly hidden. For example:

// CSS
// AI가 생성한 코드입니다. 신중하게 검토하고 사용하세요. FAQ의 자세한 정보.

.hidden {
  /* opacity: 0; */ /* this will not hide the element */
  visibility: hidden; /* this will hide the element */
  /* or */
  display: none; /* this will also hide the element */
}

I hope this answer helps you understand why a hidden DOM element is shown after child elements are updated. 😊

▲ Hide

T2.ps. LLM (Large Language Model) 이 어떻게 만들어 지는지 공부하고 있는데, 참 신기하고 대단해 보임.

▼ Show/Hide

Brilliant.org 결제해서 공부하고 있는데

[02]

Ref. [02] https://brilliant.org/courses/how-llms-work/

, 확률을 이용하고 Deep Nueral Network 로 모델을 짜서 학습시키면 이런게 가능하다는거 같은데... 사람의 뇌도 이거랑 비슷한건가?란 의문도 들고... 참 신기방기.

▲ Hide

TRRA1.References and Related Articles

▼ Show/Hide

1. Ref. [01] stackoverflow.com :: parent hidden but children still visible (I don't want them visible)!
2. Ref. [02] https://brilliant.org/courses/how-llms-work/

▲ Hide

이 글이 도움이 되셨다면, 광고 클릭 한번씩만 부탁드립니다 =ㅂ=ㅋ. (If this article was helpful, please click the ad once. Thank you. ;)