본문으로 바로가기

jQuery 노드 다루기 - 4편

category IT/프로그래밍 2016. 7. 6. 17:25

노드 삭제


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

노드 삭제 순서는 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() 

 

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

'IT > 프로그래밍' 카테고리의 다른 글

Node.js 설치 및 접속 실행하기  (0) 2016.07.08
아톰(Atom) 에디터 사용법(Window 기준)  (0) 2016.07.07
jQuery 노드 다루기 - 4편  (0) 2016.07.06
jQuery 노드 다루기 - 3편  (0) 2016.07.05
jQuery 노드다루기 - 2편  (0) 2016.07.04
VMware(가상머신) 사용법  (0) 2016.06.29

댓글을 달아 주세요