SeouliteLab

jQuery의 .detach() 메서드를 활용한 요소 제거 본문

프로그래밍

jQuery의 .detach() 메서드를 활용한 요소 제거

Seoulite Lab 2024. 4. 5. 10:10

jQuery의 .detach() 메서드는 선택한 요소를 DOM에서 제거하지만 제거된 요소를 메모리에 유지하는 기능을 제공합니다. 이를 통해 요소를 나중에 다시 추가하거나 다른 곳에 삽입할 수 있습니다. 아래는 .detach() 메서드를 사용한 다양한 예제와 설명입니다.

예제 1: 기본적인 사용법

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .detach() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="target">
  <p>제거 대상 요소</p>
</div>

<button id="detachBtn">요소 제거</button>

<script>
$(document).ready(function(){
  $("#detachBtn").click(function(){
    $("#target").detach();
  });
});
</script>

</body>
</html>

출력 결과:

<!-- 클릭 전 -->
<div id="target">
  <p>제거 대상 요소</p>
</div>

<button id="detachBtn">요소 제거</button>

<!-- 클릭 후 -->
<button id="detachBtn">요소 제거</button>

설명:

  • 버튼을 클릭하면 #target 요소가 DOM에서 제거됩니다.
  • 하지만 제거된 요소는 메모리에 유지되므로 다시 추가할 수 있습니다.

예제 2: 제거된 요소 다시 추가

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .detach() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="target">
  <p>제거 대상 요소</p>
</div>

<button id="detachBtn">요소 제거</button>
<button id="reattachBtn">요소 다시 추가</button>

<script>
$(document).ready(function(){
  $("#detachBtn").click(function(){
    $("#target").detach();
  });

  $("#reattachBtn").click(function(){
    $("#target").appendTo("body");
  });
});
</script>

</body>
</html>

출력 결과:

<!-- 클릭 전 -->
<div id="target">
  <p>제거 대상 요소</p>
</div>

<button id="detachBtn">요소 제거</button>
<button id="reattachBtn">요소 다시 추가</button>

<!-- 클릭 후 -->
<button id="detachBtn">요소 제거</button>
<button id="reattachBtn">요소 다시 추가</button>
<div id="target">
  <p>제거 대상 요소</p>
</div>

설명:

  • "요소 제거" 버튼을 클릭하여 #target 요소를 제거합니다.
  • "요소 다시 추가" 버튼을 클릭하여 제거된 요소를 다시 <body>에 추가합니다.

예제 3: 제거 후 속성 변경

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .detach() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="target">
  <p>제거 대상 요소</p>
</div>

<button id="detachBtn">요소 제거</button>

<script>
$(document).ready(function(){
  $("#detachBtn").click(function(){
    var detachedElement = $("#target").detach();
    detachedElement.find("p").text("제거된 요소");
    $("body").append(detachedElement);
  });
});
</script>

</body>
</html>

출력 결과:

<!-- 클릭 전 -->
<div id="target">
  <p>제거 대상 요소</p>
</div>

<button id="detachBtn">요소 제거</button>

<!-- 클릭 후 -->
<button id="detachBtn">요소 제거</button>
<div>
  <p>제거된 요소</p>
</div>

설명:

  • "요소 제거" 버튼을 클릭하여 #target 요소를 제거합니다.
  • 제거된 요소의 내부 텍스트를 변경하고 <body>에 다시 추가합니다.

예제 4: 제거 후 이벤트 처리

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .detach() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="target">
  <p>제거 대상 요소</p>
</div>

<button id="detachBtn">요소 제거</button>

<script>
$(document).ready(function(){
  $("#target").click(function(){
    alert("제거 대상 요소 클릭");
  });

  $("#detachBtn").click(function(){
    $("#target").detach();
  });
});
</script>

</body>
</html>

출력 결과:

<!-- 클릭 전 -->
<div id="target">
  <p>제거 대상 요소</p>
</div>

<button id="detachBtn">요소 제거</button>

<!-- 클릭 후 -->
<button id="detachBtn">요소 제거</button>

설명:

  • #target 요소를 클릭하면 알림 창이 나타납니다.
  • "요소 제거" 버튼을 클릭하여 #target 요소를 제거합니다.

예제 5: 제거 후 다시 추가하지 않는 경우

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .detach() 메서드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="target">
  <p>제거 대상 요소</p>
</div>

<button id="detachBtn">요소 제거</button>

<script>
$(document).ready(function(){
  $("#detachBtn").click(function(){
    $("#target").detach();
  });
});
</script>

</body>
</html>

출력 결과:

<!-- 클릭 전 -->
<div id="target">
  <p>제거 대상 요소</p>
</div>

<button id="detachBtn">요소 제거</button>

<!-- 클릭 후 -->
<button id="detachBtn">요소 제거</button>
``

`

설명:
- "요소 제거" 버튼을 클릭하여 `#target` 요소를 제거합니다.
- 제거된 요소를 다시 추가하지 않기 때문에 화면에서 사라집니다.
저작자표시 비영리 변경금지

'프로그래밍' 카테고리의 다른 글

JDK 24의 새로운 기능 소개: 패턴 매칭과 개선된 레코드  (0) 2024.04.05
JDK 25의 새로운 기능 살펴보기: 패턴 매칭과 편의성 강화  (0) 2024.04.05
jQuery의 .clone() 메서드를 활용한 요소 복제  (0) 2024.04.05
jQuery의 .before() 메서드를 활용한 요소 삽입  (0) 2024.04.05
jQuery의 .appendTo() 메서드를 활용한 요소 삽입  (0) 2024.04.05
'프로그래밍' Related Articles more