6개의 li태그 중 하나 혹은 여러개의 노드를 삭제해본다.
클릭한 노드 삭제하기
menu 아이디를 가진 ul태그 아래의 li태그를 클릭했을 때
해당 노드를 삭제한다.
메뉴3을 클릭하면 해당 노드가 삭제된다.
모든 노드 삭제하기 - remove( )
삭제 버튼을 누르면 ul태그의 모든 자식태그를 삭제한다.
ul태그 안의 모든 li태그가 삭제된다.
children으로 자식노드에 접근하는 대신 li태그를 직접 지정하여 삭제한다.
li태그 수만큼 메소드를 호출하여 일일히 삭제해준다.
짝수 인덱스 노드 모두 삭제하기 - even
li태그에 :even선택자를 주어 짝수 인덱스의 노드를 모두 삭제한다.
0,2,4인덱스 노드가 삭제된다.
홀수 인덱스 노드 모두 삭제하기 - odd
li태그에 :odd선택자를 주어 홀수 인덱스의 노드를 모두 삭제한다.
1,3,5인덱스 노드가 삭제된다.
html( )로 모든 노드 삭제하기
menu아이디를 가진 ul태그의 내용을 빈칸으로 만들어준다.
ul태그의 내용이 모두 삭제된다. 메소드를 한번만 호출해도 된다는 이점이 있다.
'Front-end > JavaScript' 카테고리의 다른 글
| [자바스크립트] js 스타일 접근, jQuery css 접근, 다중 접근, getComputedStyle, style, css (0) | 2022.05.27 |
|---|---|
| [자바스크립트] html, text 메소드의 차이, 노드 내용 변경하기 (0) | 2022.05.26 |
| [자바스크립트] 노드 위치 변경하기, append, insertAfter, insertBefore (0) | 2022.05.25 |
| [자바스크립트] 노드 생성하기, prepend, append, insertBefore, insertAfter, before, after, prependTo, appendTo (0) | 2022.05.23 |
| [자바스크립트] js태그 안에서 원하는 태그 찾기, filter, find (0) | 2022.05.21 |