목차
remove() / empty() 차이 remove() 예제 - "선택요소 및 그 자식요소" 제거 empty() 예제 - 선택요소에서 "자식요소" 제거 필터링 : 특정 클래스 갖은 요소만 제거
remove() / empty() 차이
remove() 메서드 - "선택요소 및 그 자식 요소"를 제거. ( 즉, 요소 자체를 삭제.) empty() - 선택요소에서 "자식 요소"를 제거. ( 즉, 요소 안 내용만 삭제.)
remove() 예제 - "선택요소 및 그 자식요소" 제거
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#hz").remove ();
});
});
</script>
<style>
#hz {
height:100px;
width:300px;
padding:10px;
color:#f70542;
border:5px solid #f70542;
background-color:#fff8f8;
}
</style>
<div id="hz" >
홈짱닷컴
<p>Homzzang.com</p>
<p>HTML, CSS, JS</p>
</div><br>
<button>요소 자체를 제거</button>
결과 보기
empty() 예제 - 선택요소에서 "자식요소" 제거
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#hz").empty ();
});
});
</script>
<style>
#hz {
height:100px;
width:300px;
padding:10px;
color:#f70542;
border:5px solid #f70542;
background-color:#fff8f8;
}
</style>
</head>
<body>
<div id="hz" >
홈짱닷컴
<p>Homzzang.com</p>
<p>HTML, CSS, JS</p>
</div><br>
<button>요소 내용을 삭제</button>
결과 보기
필터링 : 특정 클래스 갖은 요소만 제거
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").remove( ".subject, .intro" );
});
});
</script>
<style>
#hz {
height:150px;
width:300px;
padding:10px;
color:#f70542;
border:5px solid #f70542;
background-color:#fff8f8;
}
</style>
<div id="hz" >
홈짱닷컴
<p>Homzzang.com</p>
<p class="subject">HTML, CSS, JS</p>
<p class="intro">웹제작 무료 학습 사이트</p>
</div><br>
<button>요소 내용을 삭제</button>
결과 보기
