jQuery / Method / .hide() - 선택한 요소를 사라지게 하는 메서드

jQuery의 .hide()는 선택한 요소를 숨기며, DOM(Document Object Model, 문서 객체 모델)에서 제거하지 않습니다. 인수가 없으면 즉시 숨기고, 시간을 지정하면 크기와 불투명도를 변화시킨 뒤 숨깁니다. 숨김이 끝난 요소는 display: none 상태가 되어 차지하던 공간도 사라집니다.

즉시 숨기기와 시간 지정의 차이

.hide() 공식 문서에서 인수가 없는 형식과 애니메이션 형식을 구분합니다. .hide()가 기본 400밀리초 동안 동작한다고 생각하면 안 됩니다. 인수가 없는 호출은 즉시 실행하며, 애니메이션 형식의 duration 기본값이 400밀리초입니다.

시간의 단위는 밀리초이며 "fast"는 200, "slow"는 600밀리초입니다. 시간 지정 hide는 너비·높이·불투명도 등을 바꾸므로 주변 배치도 움직일 수 있습니다. 불투명도 중심의 효과를 원하면 .fadeOut()과 비교합니다. 어느 효과가 더 적합한지는 독자가 동작을 이해하는 데 필요한 변화로 판단합니다.

두 패널을 숨기고 복원하는 전체 예제

전체 코드를 UTF-8의 hide-demo.html로 저장하고 브라우저에서 엽니다. 공식 jQuery 전체 파일 4.0.0을 CDN(Content Delivery Network, 콘텐츠 전송 네트워크)에서 읽으려면 인터넷이 필요하며 별도 설치는 없습니다. effects가 빠진 slim 파일은 쓰지 않습니다.

두 패널의 숨김, 입력값 유지, flex 복원, 효과 도중 Show·Reset과 모션 감소 설정을 3.7.1과 4.0.0에서 실행했습니다. Hide·Show·Reset은 숨기는 영역 밖에 두어, 숨긴 뒤에도 다시 표시할 수 있게 했습니다.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hide and restore panels</title>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <style>
    body { font: 16px/1.6 sans-serif; max-width: 760px; margin: 24px auto; padding: 16px; }
    button, select, input { font: inherit; margin: 4px; max-width: 100%; }
    .panel { border: 2px solid teal; padding: 16px; margin: 12px 0; }
    #one { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  </style>
</head>
<body>
  <h1>Hide two panels without removing them</h1>
  <label for="duration">Duration:</label>
  <select id="duration"><option value="800">800 ms</option><option value="200">200 ms</option><option value="0">Instant</option></select>
  <button type="button" id="hide">Hide</button>
  <button type="button" id="show">Show</button>
  <button type="button" id="reset">Reset</button>
  <section class="panel" id="one"><label>Note <input value="Keep me"></label><span>First panel</span></section>
  <section class="panel" id="two">Second panel</section>
  <p id="phase">ready</p>
  <p id="result" aria-live="polite"></p>
  <script>
    $(function () {
      const $panels = $(".panel");
      let busy = false;
      let completed = 0;
      function report() {
        const visible = $panels.filter(":visible").length;
        $("#result").text(`visible=${visible} | in DOM=${$(".panel").length} | completed=${completed}`);
      }
      $("#hide").on("click", function () {
        if (busy || !$panels.filter(":visible").length) return;
        busy = true;
        completed = 0;
        $("#phase").text("hiding");
        const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
        const duration = reduced ? 0 : Number($("#duration").val());
        $panels.hide(duration, function () {
          completed++;
          if (completed === $panels.length) {
            busy = false;
            $("#phase").text("hidden");
          }
          report();
        });
        report();
      });
      function showPanels() {
        $panels.stop(true, true).show();
        busy = false;
        completed = 0;
        $("#phase").text("ready");
        report();
      }
      $("#show").on("click", showPanels);
      $("#reset").on("click", function () {
        showPanels();
        $("#one input").val("Keep me");
      });
      report();
    });
  </script>
</body>
</html>

처음에는 패널 두 개가 보이며 문서에도 두 개가 존재합니다.

visible=2 | in DOM=2 | completed=0

1. Note를 Edited note로 바꾸고 Duration을 800 ms로 둡니다.
2. Hide를 누르면 phase가 hiding이며 두 패널이 줄어들면서 사라집니다. 끝나면 phase는 hidden, 결과는 visible=0 | in DOM=2 | completed=2입니다.
3. Show를 누르면 두 패널이 즉시 다시 보이고 입력값은 Edited note로 유지됩니다. 첫 패널의 flex 배치도 복원됩니다.
4. 200 ms로 바꾸어 같은 동작을 비교합니다. 운영체제·브라우저가 모션 감소를 요청하면 코드는 선택한 시간 대신 0을 사용합니다.
5. Instant에서는 즉시 숨겨지고 완료 수는 역시 2입니다.
6. 800 ms 효과가 진행될 때 Show나 Reset을 누릅니다. 두 패널이 다시 보이고 완료 수는 0으로 정리됩니다. Reset은 입력값도 Keep me로 되돌립니다.

Show는 같은 노드를 다시 보여 주므로 편집한 입력값을 초기화하지 않습니다. Reset이 입력값을 바꾸는 것은 예제에서 .val("Keep me")를 명시했기 때문입니다. 숨김 상태에서도 노드가 남는 것과 값을 초기화하는 것은 별개의 동작입니다.

완료 콜백과 반복 입력 관리하기

complete는 선택 집합 전체에 한 번이 아니라 각 요소의 효과가 끝날 때 호출됩니다. 패널 두 개가 모두 숨겨지면 completed는 2입니다. 다음 줄에 코드를 적는 것만으로 애니메이션 완료를 기다리는 것은 아닙니다. 숨김 이후의 작업은 해당 완료 시점에 연결합니다.

이 실습은 busy로 진행 중 Hide의 추가 요청을 무시합니다. 이는 .hide() 자체의 기능이 아니라 예제가 대기열 누적을 막는 방식입니다. 이미 모두 숨겨진 상태의 Hide도 무시하므로 완료 수를 반복해서 늘리지 않습니다.

Show와 Reset은 .stop(true, true)로 대기 중인 효과를 비우고 현재 효과를 즉시 끝낸 다음 .show()를 호출합니다. 이때 기존 완료 콜백이 즉시 실행될 수 있으므로, 그 뒤에 busy·completed·phase를 초기화합니다. 두 버전에서 중간 복원 후 원래 효과 시간이 지나도 패널이나 상태가 다시 바뀌지 않는 것을 확인했습니다.

공간·접근성·복원이 예상과 다를 때

.show()는 숨기기 전 display 값을 복원하는 데 사용합니다. flex나 inline 요소를 무조건 display: block으로 덮어쓰는 방식과 구분합니다. 반응형 CSS에서 화면 크기별 표시 규칙이 달라지거나 !important 선언이 있으면 개발자 도구의 계산된 스타일을 확인하고, 표시 규칙을 클래스나 CSS 한곳에서 관리하는 편이 적합할 수도 있습니다.

CSS의 display: none은 공간뿐 아니라 일반적인 접근성 트리에서도 내용을 제외합니다. 숨긴 영역의 버튼만으로 복원을 제공하지 말고, 예제처럼 조작 버튼을 밖에 둡니다. 실제 인터페이스에서 입력 중인 영역을 숨긴다면 포커스를 어디로 옮길지도 함께 설계합니다.

숨긴 내용은 DOM과 클라이언트 메모리에 남으므로 비밀정보를 보호하는 수단이 아닙니다. 효과가 동작하지 않으면 선택 결과가 있는지, 전체 jQuery 파일을 읽었는지, 상위 요소도 숨겨져 있지 않은지, Console 오류와 display의 CSS 우선순위를 확인합니다. 빈 선택에서는 실행할 요소가 없으므로 완료 콜백도 호출되지 않습니다.