[jQuery] 화면에서 요소를 숨기거나 표시하는 여러 가지 방법

화면에서 요소를 숨기거나 표시하는 여러 가지 방법

jQuery를 이용할 경우 보통 hide() 메서드나 .css('display', 'none')과 같은 방법을 사용하실 겁니다.

이 외에도 여러 가지 방법이 있는데 한 번 알아보겠습니다.

1. DOM에서 삭제하기

한 번 삭제한 요소는 다시 표시할 수 없습니다.

✅ .remove([selector])

요소를 DOM에서 완전히 제거합니다.

해당 요소에 걸려있는 이벤트와 데이터도 함께 제거해 줍니다.

매개변수로 선택자를 넘길 수 있으며 자식/자기 자신의 필터링 용도로 유용합니다.

$('.item').remove(); 
$('.item').remove('.removable');

✅ .empty()

선택한 요소 자체는 남기되, 내부 자식 요소를 모두 제거합니다.

동적으로 리스트를 업데이트할 때 유용합니다.

$('.container').empty();

✅ .detach([selector])

요소를 DOM에서 제거합니다.

단, remove와 달리 이벤트와 데이터를 보존합니다.

const $el = $('.item').detach();

//다시 붙이기
$('.container').append($el);

2. DOM에서 숨기기 (레이아웃 제거)

요소를 삭제하지 않고 숨기되, 영역을 차지하지 않도록 하는 방법은 아래와 같습니다.

✅ .hide() / .show()

요소를 숨깁니다.

여러 개의 매개변수를 넘길 수 있습니다.

 

• duration : 숨기는 시간을 정의합니다. number | "fast" | "slow"
• easing : 숨겨질 때 표시될 애니메이션을 정의합니다. "swing" | "linear"
• complete : 숨김이 완료되었을 때 실행될 콜백을 정의합니다.

 

$('.box').hide();
$('.box').hide(300);
$('.box').hide('fast', function(){ /* ... */ });
$('.box').hide(300, 'swing', function(){ /* ... */ });

✅ .fadeOut() / .fadeIn()

요소를 서서히 사라지게 합니다.

.hide와 동일한 매개변수를 넘길 수 있습니다.

$('.box').fadeOut(200);
$('.box').fadeOut('slow', 'linear', function(){});

✅ .slideUp() / .slideDown()

요소의 높이를 줄이며 접히듯 사라집니다.

.hide와 동일한 매개변수를 사용합니다.

$('.panel').slideUp(250);

✅ .toggle()

이 경우는 show / hide를 토글링합니다.

 

요소가 감춰져 있을 땐 표시해 주고 표시되어 있을 땐 감춰줍니다.

코드가 매우 짧지만 상태를 명확히 통제해야 하는 경우 코드 가독성이 떨어질 수 있습니다.

 

.hide와 동일한 매개변수를 사용합니다.

$('.box').toggle();
$('.box').toggle(200);

3. DOM에서 숨기기 (레이아웃 유지)

이런 경우엔 jQuery메서드가 있다기 보단 보통 CSS 속성을 제어해야 합니다.

✅ visibility: hidden / visibility:visible

보이지는 않지만 요소의 자리는 유지시켜 줍니다.

$('.box').css('visibility', 'hidden');
$('.box').css({visibility : hidden});

$('.box').css('visibility', 'visible');
$('.box').css({visibility : visible});

✅ opacity: 0 / 1

요소를 투명하게 만듭니다.

클릭이 가능해지는 문제가 생길 수 있어서 poinerEvents로 이에 따른 조치를 해줘야 합니다.

$('.box').css({ opacity: 0, pointerEvents: 'none' });
$('.box').css({ opacity: 1, pointerEvents: 'auto' });

✅ 클래스 토글 방식

CSS 클래스를 미리 선언한 뒤 클래스 토글링 방식으로 제어하는 방식도 좋습니다.

이 경우 스타일과 로직이 분리되기 때문에 유지보수 측면에서 유리합니다.

CSS:

.is-hidden-space { visibility: hidden; }
.is-transparent { opacity: 0; pointer-events: none; }

jQuery:

$('.box').addClass('is-hidden-space');
$('.box').removeClass('is-hidden-space');
$('.box').toggleClass('is-transparent');

마치며

지금은 잘 안 쓰는 jQuery지만 레거시 프로젝트를 유지보수해야 하는 뉴비 개발자 분들에게는 분명 도움이 될 거라 생각합니다.

첨부파일을 다운로드하시면 실제 코드가 어떻게 동작하는지 확인할 수 있습니다.

 

감사합니다.🙂

화면에서 요소를 숨기거나 표시하는 여러가지 방법.html

0.02MB