jquery로 요소를 제거하는 방법

jquery를 사용하여 요소를 제거하는 방법: 1. "요소 object.empty() 지정" 구문과 함께 empty() 함수를 사용합니다. 2. "요소 object.remove 지정" 구문과 함께 제거() 함수를 사용합니다. ()"; 3. detach() 함수를 사용하면 구문은 "요소 object.detach() 지정"입니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, jquery 버전 1.10.2, Dell G3 컴퓨터.

jQuery 요소 제거 방법

1.empty() 방법

DOM에서 컬렉션에 있는 일치하는 요소의 모든 하위 노드를 제거합니다.
예:

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

제거 방법:

$('.hello').empty();

효과:

<div class="container">
   <div class="hello"></div>
   <div class="goodbye">Goodbye</div>
</div>

에 중첩된 요소가 여러 개 포함된 경우 해당 요소도 제거됩니다.
메모리 누수를 방지하기 위해 jQuery는 먼저 하위 요소의 데이터 및 이벤트 처리 기능을 제거한 다음 하위 요소를 제거합니다.

2. 제거() 메서드:

설명: 일치하는 집합을 제거합니다. DOM의 요소. (요소의 이벤트 및 jQuery 데이터도 제거합니다.)

.empty()와 유사합니다. .remove() 요소를 DOM 밖으로 이동합니다. 요소 자체를 제거하려면 .remove()를 사용합니다. 이는 요소와 관련된 바인딩된 이벤트 및 jQuery 데이터를 포함하여 요소 내부의 모든 것을 제거합니다.

예:

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

Remove 메서드:

$('.hello').remove();
或者用
$('div').remove('.hello');

Effect :

<div class="container">
   <div class="goodbye">Goodbye</div>
</div>

즉, 클래스에 해당하는 p도 제거됩니다

3. detach() 메서드:

DOM에서 일치하는 모든 요소를 ​​제거합니다.

detach() 메서드는 동일합니다. .remove()와 같습니다. 단, .detach()는 제거된 요소와 관련된 모든 jQuery 데이터를 저장합니다. 이 방법은 요소를 제거하고 나중에 DOM에 삽입해야 할 때 유용합니다.

4.html("") 메서드:

html() 메서드는 매개변수가 설정되지 않은 경우 선택한 요소의 현재 내용을 반환합니다. html("") 선택한 요소의 현재 콘텐츠를 지웁니다.

empty() 메서드는 모든 텍스트 및 하위 노드를 포함하여 선택한 요소에서 모든 콘텐츠를 제거합니다.

둘의 최종 효과는 동일합니다

• html() 반환 값: 문자열, 변수를 사용하여 수신할 수 있음을 의미

• empty() 반환 값: jQuery는 변수를 사용하여 수신할 수 없음

추가:

empty() 메서드에는 매개 변수가 없으며 지워진 하위 집합과 텍스트는 복원할 수 없습니다. detach(),remove() 메소드를 이용하면 변수에 저장할 수 있습니다
예를 들어 변수 p를 선언하고 다음과 같은 형식으로 작성하면 됩니다

var p=$('p').remove();

처음부터 추가해야 하는 경우에는 다음과 같이 직접 추가하면 됩니다

p.appendTo("body");

detach(),remove() 메소드입니다. 모두 기능을 가지고 있습니다. Remove()와 detach()의 차이점은 Remove()는 Remove('a')와 같은 지정된 클래스를 삭제할 수 있지만 detach()는 이를 수행할 수 없다는 것입니다.

또한 참고하세요 remove() 메서드를 사용하여 요소를 제거한 다음 추가하면 하위 집합의 이벤트는 존재하지 않지만 detach() 하위 집합의 이벤트는 계속 실행될 수 있습니다.

【추천 학습: jQuery 동영상 튜토리얼, 웹 프론트엔드 개발 동영상】

위 내용은 jquery로 요소를 제거하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!