11/3 35-1 [JS] DOM2 - remove

이번엔 노드 삭제할 것!

[표현식]

  부모요소.removeChild(자식요소)    =>부모에서 자식요소 삭제 시
  자신요소.remove()     =>자기자신 삭제 

 

행 삭제하기 버튼을 클릭해서 선택 한 행 삭제하기

 

구현화면

적용할 문서 HTML

 <script> 
 //1. 문서에서 table태그와 button태그를 가져와서 작업할 거!
 var table = document.querySelector('table');
 var button = document.querySelector('button');
 //2. 버튼을 클릭 했을 때 실행 할 이벤트를 입힘 (클릭이벤트 입히는것 잘 익혀 놓자!)
 button.addEventListener('click',function(){  // 인자에 들어간 함수는 콜백함수! 조건이 되면 자동으로 호출되는 함수다.
      //input태그 속성에 checked되어있는 것들을 싹 가져와서 처리 할 것! 도큐먼트 사용되지만 table로 가져오면 더 빠르다!
    var checked = table.querySelectorAll('input[type=checkbox]:checked')
 	  // 잘 가져왔는지 콘솔에 확인
     	console.log(checked);  
        checked.forEach(function(checkbox,index){
    		console.log('%s:%s',checkbox.value,index)   
            console.log(checkbox.parentElement.parentElement);
            // 자신요소 삭제!(행 자체를 날려야 하니 checkbox부모의 부모로 올라가면 됨! )
            checkbox.parentElement.parentElement.remove();         
         });
  });
 </script>

DOM API 사용하기:노드 삭제하기

행 삭제하기

	1행1열	1행2열	1행3열
	2행1열	2행2열	2행3열
	3행1열	3행2열	3행3열
	4행1열	4행2열	4행3열
	5행1열	5행2열	5행3열

---