ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • jQuery - .unwrap()
    jQuery 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>
    

    'jQuery' 카테고리의 다른 글

    jQuery - .wrapAll()  (0) 2020.06.23
    jQuery - .val()  (0) 2020.06.23
    jQuery - .width()  (0) 2020.06.23
    jQuery - .toggleClass()  (0) 2020.06.23
    jQuery - .toggle()  (0) 2020.06.23

    댓글

Designed by Tistory.