jQuery

jQuery - .unwrap()

행복하게사는게꿈 2020. 6. 23. 19:45

.unwrap()

 

 - 선택한 요소의 상위 태그를 제거한다.

 

문법

.unwrap()

예를 들어

$( 'h1' ).unwrap();

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


예제1

 

 - h1 요소의 상위 태그인 div태그를 제거한다.

<!doctype html>

<html lang="ko">

  <head>
  
    <meta charset="utf-8">
    
    <title>jQuery</title>
    
    <style>
    
      div {
      
        background-color: black;
        
      }
      
    </style>
    
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    
    <script>
    
      $( document ).ready( function() {
      
        $( 'h1' ).unwrap();
        
      } );
      
    </script>
    
  </head>
  
  <body>
  
    <div>
    
      <h1>Hello World!</h1>
      
    </div>
    
  </body>
  
</html>

 

예제2

 

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

<!doctype html>

<html lang="ko">

  <head>
  
    <meta charset="utf-8">
    
    <title>jQuery</title>
    
    <style>
    
      div {
      
        background-color: black;
        
      }
      
    </style>
    
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    
    <script>
    
      $( document ).ready( function() {
      
        $( 'div' ).contents().unwrap();
        
      } );
      
    </script>
    
  </head>
  
  <body>
  
    <div>
    
      <h1>Hello World!</h1>
      
    </div>
    
  </body>
  
</html>