[jQuery] .empty()

HTML CSS JAVASCRIPT JQUERY SVG

HTML CSS JAVASCRIPT JQUERY

티스토리 뷰

jQuery

[jQuery] .empty()

.empty()

선택한 요소의 하위 요소를 제거합니다.

.empty()

선택한 요소의 하위 요소를 제거합니다.

문법

$("선택자").empty();

정의

.empty() 선택한 요소의 하위 요소를 제거합니다.

비교(Compare)

선택한 요소를 삭제하고 싶다면(데이터 및 이벤트 포함) .remove() 메서드를 사용합니다.
선택한 요소의 컨텐츠만 삭제하고 싶다면 .empty() 메서드를 사용합니다.
선택한 요소를 삭제하고 싶다면(데이터 및 이벤트 불포함) .detach() 메서드를 사용합니다.
선택한 요소의 부모 요소를 삭제하고 싶다면 .unwrap() 메서드를 사용합니다.

Sample1

.remove() .empty() .detach() : 요소를 삭제하는 예제입니다.

결과

속성(Attributes)

.closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.
.find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.
.next() 메서드는 선택한 요소의 다음 요소를 선택합니다.
.nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.

리셋 클릭하면 리스트를 .remove() 삭제합니다. 클릭하면 리스트를 .empty() 삭제합니다. 클릭하면 리스트를 .detach() 삭제합니다.

jquery

$(".choice1 .btn1").on("click", function(e){
    e.preventDefault();
    $(".list1 li").remove();
});
$(".choice1 .btn2").on("click", function(e){
    e.preventDefault();
    $(".list1 li").empty();
});
$(".choice1 .btn3").on("click", function(e){
    e.preventDefault();
    $(".list1 li").detach();
});

html

<h3>속성(Attributes)</h3>
<div class="list1">
    <ul>
        <li>.closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.</li>
        <li>.find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.</li>
        <li>.next() 메서드는 선택한 요소의 다음 요소를 선택합니다. <em>.empty()</em></li>
        <li>.nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
    </ul>
</div>

Total

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
        .bLine {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
        .rLine {padding: 4px 6px 2px 6px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d;}
    </style>
</head>
<body>
    
    <h3>속성(Attributes)</h3>
    <div class="list1">
        <ul>
            <li>.closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.</li>
            <li>.find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.</li>
            <li>.next() 메서드는 선택한 요소의 다음 요소를 선택합니다. <em>.empty()</em></li>
            <li>.nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
        </ul>
    </div>
    
    <div class="choice1">
    	<a href="#" class="off1">리셋</a><br>
        <a href="#" class="btn1">클릭하면 리스트를 <em>.remove()</em> 삭제합니다.</a><br>
        <a href="#" class="btn2">클릭하면 리스트를 <em>.empty()</em> 삭제합니다.</a><br>
        <a href="#" class="btn3">클릭하면 리스트를 <em>.detach()</em> 삭제합니다.</a><br>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
    	$(".choice1 .off1").on("click", function(e){
            e.preventDefault();
            $(".list1 li").remove();
            $(".list1 ul").append().html("<li>.closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.</li><li>.find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.</li><li>.next() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li><li>.nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>");
        });
        $(".choice1 .btn1").on("click", function(e){
            e.preventDefault();
            $(".list1 li").remove();
        });
        $(".choice1 .btn2").on("click", function(e){
            e.preventDefault();
            $(".list1 li").empty();
        });
        $(".choice1 .btn3").on("click", function(e){
            e.preventDefault();
            $(".list1 li").detach();
        });
    </script>
</body>
</html>

호환성(Compatibility)

메서드	버전						6	7	8	9	10	11
empty()	jQeury 1.x 버전	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
	jQeury 2.x 버전	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
	jQeury 3.x 버전	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능