jQuery DOM 삭제 노드 작업 안내_jquery

다음 예에서는 다음 HTML 코드를 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

• 애플


• 바나나


• 주황색


• 포도


• 딸기

1. 제거() 메소드:

함수: DOM에서 일치하는 모든 요소를 ​​제거합니다. 전달된 매개변수는 jQuery 표현식을 기반으로 요소를 필터링하는 데 사용됩니다.

예를 들어 위 그림의

노드에서 두 번째
• 요소 노드를 삭제하는 경우 jQuery 코드는 다음과 같습니다.
  코드 복사 코드는 다음과 같습니다.
  $(문서).ready(함수() {
  $("ul li:eq(1)").remove();
  });
  
  
  remove() 메소드를 사용하여 노드를 삭제하면 해당 노드에 포함된 모든 하위 노드가 동시에 삭제됩니다. 이 메서드의 반환 값은 삭제된 노드에 대한 참조이므로 해당 요소는 나중에 다시 사용할 수 있습니다. 다음 jQuery 코드는 제거() 메서드를 사용하여 요소를 삭제한 후에도 계속 사용할 수 있음을 보여줍니다.
  코드 복사 코드는 다음과 같습니다.
  var $li=$("ul li:eq(1)").remove();
  $li.appendTo("ul"); //삭제된 노드를

  요소에 다시 추가합니다
  
  
  appendTo() 메소드의 기능을 직접 사용하여 위 코드를 단순화할 수 있습니다.
  코드 복사 코드는 다음과 같습니다.
  $("ul li:eq(1)").appendTo("ul");//appendTo() 메서드를 사용하여 요소를 이동할 수도 있습니다. 요소를 이동할 때는 먼저 문서에서 요소를 삭제한 다음 문서의 지정된 노드에 요소를 삽입합니다.
  
  
  또한, 제거() 메소드는 매개변수를 전달하여 요소를 선택적으로 삭제할 수도 있습니다.
  코드 복사 코드는 다음과 같습니다.
  $("ul li").remove("li[title='t1']");
  
  

  2. detach() 메소드:

  Remove()와 마찬가지로 Detach()도 DOM에서 일치하는 모든 요소를 ​​제거합니다. 그러나 이 방법은 jQuery 객체에서 일치하는 요소를 제거하지 않으므로 나중에 이러한 일치 요소를 재사용할 수 있다는 점에 유의해야 합니다. Remove()와는 달리 바인딩된 모든 이벤트, 첨부 데이터 등이 유지됩니다.
  다음 예를 통해 Remove() 메소드와 차이점을 알 수 있습니다.
  코드 복사 코드는 다음과 같습니다.
  $("ul li").click(function(){
  경고($(this).html());
  })
  var $li=$("ul li:eq(1)").detach(); //요소 삭제
  $li.appendTo("ul"); //이 요소를 다시 추가하고 이전에 바인딩된 이벤트가 여전히 있는지 확인합니다. 제거() 메서드를 사용하여 요소를 삭제하면 이전에 바인딩된 이벤트가 삭제됩니다. 무효
  
  

  3.empty() 메소드

  엄밀히 말하면empty() 메소드는 노드를 삭제하는 것이 아니라 요소의 모든 하위 노드를 지울 수 있습니다.
  코드 복사 코드는 다음과 같습니다.
  $("ul li:eq(1)").empty();//두 번째
• 요소 노드를 얻은 후 이 요소의 내용을 지웁니다.