상위 태그를 제거하는 방법 - .unwrap()

.unwrap()

.unwrap()은 선택한 요소의 상위 태그를 제거합니다.

 

기본형

.unwrap()

예를 들어

$( 'h1' ).unwrap();

은 h1 요소의 바로 상위의 태그를 제거합니다.

 

예제 1

h1 요소의 상위 태그인 div 태그를 제거합니다.

<button>Click to unwrap</button>
<div>
  <h1>Hello World!</h1>
</div>

div {
  background-color: #888;
}

$( document ).ready( function() {
  $( 'button').click( function() {
    $( 'h1' ).unwrap();
  });
});

 

예제 2

.contents()를 이용하여 자식 요소를 그대로 둔 채 현재 태그를 제거할 수 있습니다.

<button>Click to unwrap</button>
<div>
  <h1>Hello World!</h1>
</div>

div {
  background-color: #888;
}

$( document ).ready( function() {
  $( 'button').click( function() {
    $( 'div' ).contents().unwrap();
  });
});

같이 보면 좋은 글

• 선택한 요소에 상위 태그를 만들 때는 .wrap()을 사용합니다.