본문 바로가기

Webstoryboy

Category

Explanation

JQUERY

[jQuery] .remove()

.remove()

선택한 요소(데이터 및 이벤트 포함)를 제거합니다.


.remove()

선택한 요소(데이터 및 이벤트 포함)를 제거합니다.

문법(Syntax)

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

정의(Definition)

  • .remove() 메서드는 선택한 요소(데이터 및 이벤트 포함)를 제거합니다.

비교(Compare)

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

Sample1

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

결과

속성(Attributes)

  • .closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.
  • .find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.
  • .next() 메서드는 선택한 요소의 다음 요소를 선택합니다.
  • .nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.
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>

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기