목차
- unwrap() 예제 - 부모 요소 제거
- unwrap() 정의
- unwrap() 구문
- unwrap() 예제 - 부모 요소 생성 후 제거
- 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
