jQuery 노드 다루기 - 4편

노드 삭제

오늘 공부할 내용은 노드의 삭제 입니다

노드 삭제 순서는 1. 제거할 노드 찾기 --> 2. 노드제거 이렇게 2가지 순서로 간단하게 노드를 삭제할 수 있습니다.

 

오늘의 주제 노드삭제에 대한 핵심 내용을 정리해 보겠습니다.

1.  특정 노드 삭제
2. 모든 자식 노드 삭제

 

□특정 노드 삭제

 

특정 노드를 삭제하고 싶은 경우 remove() 메서드를 사용합니다.

사용법 :

$대상.remove()

 

예제를 통해 쉽게 알아 보겠습니다.

Ex01 - 클릭한 노드를 삭제해 주세요.

 

왼쪽 사진을 보면 menu4가 삭제된 것을 확인할 수 있습니다.

script에서 기준으로 잡은 노드는 사용자가 클릭한 <li>태그이기 때문에  $("ul.menu li")를 클릭했을 경우 클릭 당한 $(this)가 remove()메서드를 통해 삭제가 되는 것을 알 수 있습니다.

 

 

□모든 자식 노드 삭제

자식 노드를 모두 삭제할 때도 remove() 메서드를 사용합니다.

 

사용법 :

$대상.children().remove()

 

 

 

 

<button id="remove">삭제</button> 를 눌렀을 경우 javascript를 통해 삭제버튼을 클릭했을 경우 $("ul.menu").children().remove()를 통해 자식노드를 전부 찾아 삭제하는 명령을 수행합니다.  노드 삭제하는 메서드에는 removeAll()같은 명령어가 없기 때문에 자식 노드를 모두 지우려면 찾고자 하는 대상을 찾은 후 remove()메서드를 호출하면 됩니다.

 

 

□노드 삭제 정리

노드 제거	특정 노드 제거	$대상.remove()
	모든 자식 노드 제거	$대상.children().remove()

 

다음에 배울 내용은 노드 내용 읽기 및 변경 입니다.