jQuery / Reference / .unwrap()

.unwrap()은 선택한 요소의 바로 위 부모를 제거하고, 그 부모의 자식들을 한 단계 위로 올립니다. 선택한 요소 자신과 형제들은 남으며, 부모 안의 다른 내용도 함께 보존됩니다.

문법과 적용 범위

$(".item").unwrap();
$(".item").unwrap(".group");

인수 없이 쓰면 제거 가능한 직접 부모를 대상으로 하고, 선택자를 주면 부모가 그 조건에 맞을 때만 제거합니다. 부모의 모든 조상을 한꺼번에 지우는 기능은 아닙니다. body는 제거하지 않으며, 반환값은 원래 선택 집합입니다. 지정한 자식 하나만 밖으로 꺼내는 이동 작업과도 구분해야 합니다.

jQuery 공식 문서의 .unwrap() 정의와 인수에서 다른 호출 형태도 확인할 수 있습니다.

전체 실행 예제

아래 코드를 UTF-8 형식의 example.html 파일로 저장한 뒤 브라우저로 여세요. 예제는 jQuery 4.0.0 일반 빌드를 외부 주소에서 불러오므로 인터넷 연결이 필요합니다. 문서가 준비된 뒤 실행하도록 $(function () { ... }) 안에 코드를 작성했습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery unwrap 예제</title>
  <style>
    body { margin: 24px; font-family: sans-serif; line-height: 1.6; }
    .marked { background: #fff0b3; border: 2px solid #835b00; }
    .active { color: #a00000; font-weight: bold; }
    button, input, select { font: inherit; }
    #output { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
<div id="container">
  <div class="group marked">
    <p class="item">선택한 문단</p>
    <p class="other">같은 부모의 다른 문단</p>
  </div>
</div>
<button id="unwrap" type="button">부모 제거</button>
  <p id="output" aria-live="polite"></p>
  <script>
    $(function () {
      $("#unwrap").on("click", function () {
        $(".item").unwrap(".group");
        $("#output").text("group 수: " + $(".group").length +
          " / container의 문단 수: " + $("#container > p").length);
      });
    });
  </script>
</body>
</html>

실행 결과 확인

버튼을 누르면 group의 테두리가 없어지고 두 문단이 container의 직접 자식으로 남습니다. 결과는 group 수: 0 / container의 문단 수: 2입니다. 다시 눌러도 container는 .group 조건에 맞지 않아 제거되지 않습니다.

사용할 때 주의할 점

• 부모의 클래스나 id를 쓰는 CSS는 부모 제거 후 적용되지 않을 수 있습니다. DOM 구조뿐 아니라 화면 모양도 함께 확인하세요.
• 부모에 직접 등록했던 jQuery 이벤트·데이터는 부모와 함께 없어집니다. 자식이 남는다고 부모의 동작까지 유지되는 것은 아닙니다.
• 여러 자식이 같은 부모를 가리키면 그 부모는 한 번 제거됩니다. 더 높은 조상까지 제거하려는 의도가 없다면 조건 선택자를 사용하세요.

용도를 비교하려면 .wrap()으로 각 요소 감싸기, .wrapAll()의 이동 주의점을 참고하세요.