.unwrap()

jQuery Reference

.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>