다중 엘리먼트 선택방법과 일괄 삭제

//Ex9-다중 노드선택 방법과 일괄삭제, 노드의 자리바꾸기
window.addEventListener("load", function(){

    var section = document.querySelector("#section9");
    
    var noticeList = section.querySelector(".notice-list"); 
    var tbody = noticeList.querySelector("tbody");
    var allCheckbox = section.querySelector(".overall-checkbox");
    var delButton = section.querySelector(".del-button");
    var swapButton = section.querySelector(".swap-button");
    
//전체선택박스
    allCheckbox.onchange = function(){
        var inputs = tbody.querySelectorAll("input[type='checkbox']");
        for(var i = 0; i<inputs.length; i++){
            inputs[i].checked = allCheckbox.checked; //상태를 같게 만듦
        }
    };
    
//일괄삭제버튼    
    delButton.onclick = function(){
        var inputs = tbody.querySelectorAll("input[type='checkbox']:checked"); //pseudo class
        for(var i = 0; i<inputs.length; i++){
            inputs[i].parentElement.parentElement.remove();
        }
    };
});

1. 태그안에 타입을 선택할 때:
   .querySelectorAll("tag [type = 'type']");
2. Pseudo Class 예시
   .querySelectorAll("input[type='checkbox']:checked");
   타입이 checkbox 인것중 checked가 true인 것들만 선택.
3. inputs[i].parentElement.parentElement.remove();

<tr>
    <td><input type="checkbox"></td>
    <td>1</td>
    <td><a href="1">자바스크립트란..</a></td>
    <td>2019-01-25</td>
    <td>newlec</td>
    <td>2</td>
</tr>

tr태그를 지우기 위해, input type = "checkbox"의 부모의 부모를 선택해서 지움.