[HTML_CSS] JQ - unwrap() 메서드 - 부모요소 제거 (= unwrap메서드 = 언랩 메서드)

1. unwrap() 예제 - 부모 요소 제거
2. unwrap() 정의
3. unwrap() 구문
4. unwrap() 예제 - 부모 요소 생성 후 제거
5. unwrap() 예제 - 중간의 테이블 코드 제거

unwrap() 예제 - 부모 요소 제거

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("button").click(function(){

        $("p").unwrap();

    });

});

</script>

<style>

div{background-color: yellow;}

article{background-color: pink;}

</style>

<div>

  <p>홈짱닷컴 Homzzang.com</p>

</div>

<article>

  <p>그누보드 제작관리 강의</p>

</article>

<button>클릭</button>

결과보기

unwrap() 정의

 

선택요소의 부모요소 제거. 

 

---

cf.

wrap() 메서드 : 선택요소에 부모요소 생성.

 

unwrap() 구문

 

$(selector).unwrap()

 

unwrap() 예제 - 부모 요소 생성 후 제거

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("#btn1").click(function(){

        $("p").wrap("<div></div>");

    });

    $("#btn2").click(function(){

        $("p").unwrap();

    });

});

</script>

<style>

div{background-color: yellow;}

</style>

<p>홈짱닷컴 Homzzang.com</p>

<p>그누보드 제작관리 강의</p>

<button id="btn1">wrap</button>

<button id="btn2">Unwrap</button>

 

결과보기

unwrap() 예제 - 중간의 테이블 코드 제거

 

<div class="a"> 

    <div class="b">

        <table cellpadding="0" style="width:100%;">

            <tr>

                <td>

                    <div class="c">

......

<script>

$(function() {

      $(".b > table").contents().unwrap();

      $(".b > tbody").contents().unwrap();

      $(".b > tr").contents().unwrap();

      $(".b > td").contents().unwrap();

}

</script>

 

신리 님 (210302) https://sir.kr/so_ok365/4054