jQuery remove() 메서드
remove() 메소드는 jQuery의 DOM에서 요소를 제거합니다. 마찬가지로 empty() 메서드는 DOM에서 선택한 요소의 자식 요소만 제거합니다.
이 튜토리얼은 jQuery에서 remove 및 empty 메소드를 사용하는 방법을 보여줍니다.
jQuery remove() 메소드
remove() 메소드는 DOM에서 선택된 요소를 제거할 수 있습니다. 이 메서드는 선택한 요소와 요소 내부의 모든 것을 제거합니다.
이 메서드의 구문은 다음과 같습니다.
$(selector).remove(selector)
selector가 하나 이상의 요소를 제거할지 여부를 지정하는 선택적 매개변수인 경우 제거할 요소가 둘 이상인 경우 쉼표로 구분할 수 있습니다. remove() 메소드에 대한 예를 시도해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#RemoveDiv").remove();
});
});
</script>
</head>
<body>
<div id="RemoveDiv" style="height:200px; width:300px; border:1px solid black; background-color:lightblue;">
<h1> This Div Will be Removed </h1>
<p>Paragraph one in the Div.</p>
<p>Paragraph two in the Div.</p>
</div>
<br>
<div style="height:200px; width:300px; border:1px solid black; background-color:lightblue;">
<h1> This Div Will not be Removed </h1>
<p>Paragraph one in the Div.</p>
<p>Paragraph two in the Div.</p>
</div>
<button>Remove Div</button>
</body>
</html>
위의 코드는 선택된 div와 그 자식 요소를 제거합니다. 출력 참조:
보시다시피 remove() 메서드는 선택한 요소 내부의 모든 요소를 삭제합니다. 또 다른 방법인 empty()는 자식 요소만 제거합니다.
jQuery empty() 메서드
empty() 메서드는 선택한 요소에서 모든 자식 요소를 제거할 수 있습니다. 또한 자식 요소 내부의 콘텐츠를 제거합니다.
empty() 메소드의 구문은 다음과 같습니다.
$('selector').empty();
selector가 id, 클래스 또는 요소 이름이 될 수 있는 경우 empty 메서드에 대한 예를 시도해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#RemoveDiv").empty();
});
});
</script>
</head>
<body>
<div id="RemoveDiv" style="height:200px; width:300px; border:1px solid black; background-color:lightblue;">
Hello this is the div content
<h1> This Div Content Will be Removed </h1>
<p>Paragraph one in the Div.</p>
<p>Paragraph two in the Div.</p>
</div>
<br>
<div style="height:200px; width:300px; border:1px solid black; background-color:lightblue;">
<h1> This Div Content Will not be Removed </h1>
<p>Paragraph one in the Div.</p>
<p>Paragraph two in the Div.</p>
</div>
<button>Remove Div</button>
</body>
</html>
위의 코드는 div 자체가 아니라 div의 자식 콘텐츠만 제거합니다. 출력 참조:
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook