Chapter 04. 노드 다루기 - 노드 생성/추가/삭제/이동. Lensson 03. 노드 삭제
WEB/JQUERY-CONCEPT 2017. 11. 10. 13:09 |Chapter 04. 노드 다루기 - 노드 생성/추가/삭제/이동.
Lensson 03. 노드 삭제
- 핵심 01: 특정 노드 삭제
- 핵심 02: 모든 자식 노드 삭제
- 핵심 01: 특정 노드 삭제
사용법 : $대상.remove()
예제 01. 클릭한 노드를 삭제해 주세요
1 2 3 4 5 6 7 8 | $(document).ready(function() { $("ul.menu li").click(function() { $(this).remove(); }) }); | cs |
예제 02. 삭제 버튼을 클릭하면 실행 후 화면 처럼 인덱스 값이 짝수인 메뉴만을 삭제해 주세요
1 2 3 4 5 6 7 8 9 | $(document).ready(function() { $("#remove").click(function() { $("ul.menu li:even").remove(); // 인덱스 값이 짝수인 노드 삭제 $("ul.menu li:odd").remove(); // 인덱스 값이 수인 노드 삭제 }) }); | cs |
- 핵심 02: 모든 자식 노드 삭제
사용법 : $대상.children().remove()
예제 03. 삭제 버튼을 클릭하면 실행 후 화면처럼 ul.menu의 전체 자식노드를 지워 주세요
1 2 3 4 5 6 7 8 9 10 | $(document).ready(function() { $("#remove").click(function() { $("ul.menu").children().remove(); 또는 $("ul li").remove(); 또는 $("ul li").html(""); }) }); | cs |
* remove()는 특정 노드를 삭제하는 용도이고, 내부 전부를 비우는데 사용하기에는 적합하지않는다
내부 전부를 비우는데는 실무에서는 html("")을 많이쓰인다
'WEB > JQUERY-CONCEPT' 카테고리의 다른 글
| Chapter 05. 스타일 다루기. Lesson 01. 스타일 소개 (0) | 2017.11.10 |
|---|---|
| Chapter 04. 노드 다루기 - 노드 생성/추가/삭제/이동. Lensson 03. 노드 삭제 (0) | 2017.11.10 |
| Chapter 04. 노드 다루기 - 노드 생성/추가/삭제/이동. Lensson 02. 노드 이동 (0) | 2017.11.10 |
| Chapter 04. 노드 다루기 - 노드 생성/추가/삭제/이동. Lensson 01. 노드 생성 및 추가 (0) | 2017.11.09 |
| Chapter 03. 노드 다루기 - 노드 찾기. Lesson 05. 형제 노드 찾기 (0) | 2017.11.09 |