[HTML_CSS] JQ - remove() 메서드 - 선택요소 제거 (= remove메서드 = 리무브 메서드)

1. remove() 예제 - 모든 p요소 제거
2. remove() 정의
3. remove() 구문
4. remove() 예제 - cf. detach() 메서드
5. remove() 예제 - hz 클래스 가진 p요소 제거
6. remove() 예제 - hz, intro 클래스 가진 p요소 제거

remove() 예제 - 모든 p요소 제거

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("p").remove();

  });

});

</script>

<p>홈짱닷컴 Homzzang.com</p>

<p>홈페이지 제작관리 강의</p>

<button>클릭</button>

결과보기

remove() 정의

 

선택요소와 그 자식노드 그리고 내용까지 모두 제거.

※ (data, event) 제거 O 후,  요소들 제거.

 

---

cf.  

• detach() 메서드 - (data, event) 제거 X 후, 요소들 제거.
• empty() 메서드 - 선택요소 안 내용만 제거(= 비우기).

 

remove() 구문

 

$(selector).remove(selector1, selector2, ....)

 

---

[매개변수]

 

selector1, selector2, ....

선택. selector에 해당하는 것들 중 특정해 제거할 1개 이상의 요소를 콤마(,)로 구분 나열.

• 미지정 시, selector에 해당하는 전부를 제거함.

 

remove() 예제 - cf. detach() 메서드

※ 'remove, detach' 각각의 버튼 클릭 후, p요소 클릭해 효과 비교.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("#btn1").click(function(){

    $("body").append($("#p1").detach());

  });

  $("#btn2").click(function(){

    $("body").append($("#p2").remove());

  });

  $("p").click(function(){

    $(this).animate({fontSize: "+=1px"})

  });

});

</script>

<p id="p1">홈짱닷컴 Homzzang.com</p>

<p id="p2">홈페이지 제작관리 강의</p>

<button id="btn1">Detach 후, p 요소 append</button>

<button id="btn2">Remove 후, p 요소 append</button>

 

결과보기

remove() 예제 - hz 클래스 가진 p요소 제거

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("p").remove(".hz");

  });

});

</script>

<style>

.hz {color: red; font-size: 20px;}

</style>

<p>홈페이지 제작관리 강의</p>

<p class="hz">홈짱닷컴</p>

<p class="hz">Homzzang.com</p>

<button>클릭</button>

 

결과보기

remove() 예제 - hz, intro 클래스 가진 p요소 제거

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("p").remove(".hz, .intro");

  });

});

</script>

<style>

.hz {color: red; font-size: 20px;}

.intro {color: blue; font-size: 20px;}

</style>

<p class="hz">홈짱닷컴 Homzzang.com</p>

<p class='intro'>홈페이지 제작관리 강의</p>

<p class='intro'>코딩언어 그누보드 강의</p>

<p>HTML CSS JS jQuery PHP SQL BS Python</p>

<button>클릭</button>

 

결과보기