지정된 요소를 제거하려는 경우 jQuery는 비어 있는() 및 제거([expr])라는 두 가지 메소드를 제공합니다. 둘 다 요소를 삭제하지만 둘 사이에는 여전히 차이점이 있습니다.
empty 메소드
empty() 메소드는 노드를 삭제하지 않지만 노드를 지웁니다. 요소의 모든 하위 노드를 지울 수 있습니다.
비어 있으면 자체 노드를 삭제할 수 없습니다.
remove 메소드
이 노드와 여기에 포함된 모든 하위 노드 노드는 동시에 삭제됩니다
지정된 컬렉션의 요소를 삭제하는 필터링 표현식을 제공합니다
아래에서는 코드를 사용하여 자세히 분석합니다
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>remove()与empty()的区别</title>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<style type="text/css">
#dv1{
width:250px;
height:250px;
background:red;
float:left;
}
#dv2{
width:250px;
height:250px;
background:green;
float: left;
margin-left:5px;
margin-right:5px;
}
</style>
</head>
<body>
<div id="dv1">
<p>元素1</p>
<p>元素2</p>
</div>
<div id="dv2">
<p>元素3</p>
<p>元素4</p>
</div>
<input type="button" value="empty" id="but1">
<input type="button" value="remove" id="but2">
<script>
$("#but1").click(function(){
$("#dv1").empty();
})
$("#but2").click(function(){
$("#dv2").remove();
})
</script>
</body>
</html>위 코드를 실행하면 다음을 볼 수 있습니다. 비우기를 클릭하면 Element 1과 Element 2가 지워지지만 div는 여전히 존재합니다
제거를 클릭하면 안에 있는 요소뿐만 아니라 div 자체도 삭제됩니다
다음 섹션