jQuery를 사용하여 노드를 삭제하는 세 가지 방법

테스트에 사용된 HTML 코드:

가장 좋아하는 과일은 무엇인가요?

• Apple


• 오렌지


• pineapple

1.remove() 메소드

$("ul li "). click(function(){
alert($(this).html());
});
var $li = $("ul li:eq(1)"). ;
$li.appendTo("ul");

remove() 메소드를 사용하여 노드를 삭제하면 해당 노드에 포함된 모든 하위 노드도 동시에 삭제됩니다. 이 메서드의 반환 값은 삭제된 노드에 대한 참조이므로 해당 요소는 나중에 다시 사용할 수 있습니다.

2. detach() 메서드

var $li = $("ul li:eq(1)").detach();
$li.appendTo("ul" );

remove()와 마찬가지로 detach()도 DOM에서 일치하는 모든 요소를 ​​제거합니다. 하지만 이 메서드는 jQuery 객체에서 일치하는 요소를 삭제하지 않으므로 나중에 이러한 일치 요소를 다시 사용할 수 있다는 점에 유의해야 합니다. 제거()와 달리 모든 바인딩된 이벤트와 추가 데이터가 유지됩니다.

3.empty() 메소드

var $li = $("ul li:eq(1)").empty();
$li.appendTo("ul" );

엄밀히 말하면empty() 메소드는 노드를 삭제하지 않지만 요소의 모든 하위 노드를 지울 수 있습니다.