[JS] 47. 検証、ノードの削除

例検証＃ケンショウ＃

        if(!unameInput.checkValidity()) {
            // alert("이름 입력오류 : " + unameInput.validationMessage);
            return;
        }
        e.preventDefault();    

regButton.onclick = function(e){

        if(!unameInput.checkValidity()) {
            // alert("이름 입력오류 : " + unameInput.validationMessage);
            return;
        }
        e.preventDefault();        

        var html = '<li class="item"><input class="mr-2" type="checkbox">'+unameInput.value+'<a class="btn-close icon icon-close ml-auto" href="">삭제</a></li>';
        listUl.insertAdjacentHTML("afterbegin", html);
        //체크박스와 삭제 버튼(btn-close) 만들기 (css 작업 따로)

        if(listUl.children.length > 0)
            listUl.classList.remove("empty");
    };

ノードの削除

1.最初の項目を削除する場合、

最初に「最初のアイテムを削除」ボタンを作成します.

    delFirstButton.onclick = function(e){
        e.preventDefault();
        
        //var li =listUl.firstElementChild;
        //li는 listUI의 첫번째 자식 엘리먼트이다.
        //listUl.removeChild(li);
        //listUI의 자식 중 li를 삭제한다.

        listUl.firstElementChild.remove();
        //listUI에서 첫번째 자식 엘리먼트를 삭제한다.
    };

2.イベント処理とターゲットがリストの場合

    listUl.onclick = function(e){
        if(!e.target.classList.contains("btn-close"))
            return;
        
        e.preventDefault();

        // target마다 삭제해야 할 대상이 다르다.
        if(confirm("정말 삭제하시겠습니까?"))
        // 정말 삭제하려고 했던 것인지 물어보자.
            e.target.parentElement.remove();
            //부모 노드를 삭제

        if(listUl.children.length == 0)
            listUl.classList.add("empty");
        // 항목이 없을때의 상태를 설정해주자.

    };

3.リスト全体の選択項目を削除

delAllButton.onclick = function(e){
        e.preventDefault();

        var lis = listUl.children;

        for(var i=0; i<lis.length; i++){
             var checkbox = lis[i].querySelector("input[type=checkbox]");

             if(checkbox.checked)
                 lis[i].remove();
             // 체크박스에서 체크가 됐다면 삭제한다.
         }
        
        
    };

隣接するものを連続的に選択して削除すると、エラーが削除されます.
どうしたんですか.1つが削除されると、配列のインデックスが変更されるため、次の配列に誤って適用されます.
この問題を解決するために、後で削除します.

この操作を実行すると、

もう一つ残ってる

delAllButton.onclick = function(e){
        e.preventDefault();


        var lis = listUl.children;
        var size = lis.length;
        //var arr = Array.from(lis);

        for(var i=0; i<size; i++){ //  0,1,2,3,4 : 5개 -> size
            var checkbox = lis[size-1-i].querySelector("input[type=checkbox]");
        // index의 최대값은 4이기 때문에 size-1에서 i를 빼나간다.

            if(checkbox.checked)
                lis[size-1-i].remove();
        }
    };

for(var i=0; i<size; i++){ //  0,1,2,3,4 : 5개 -> size
            var checkbox = lis[size-1-i].querySelector("input[type=checkbox]");

            if(checkbox.matches("li input:checked"))
                lis[size-1-i].remove();
            // input이 checked라는 pseudo 클래스가 적용된 상태라면 삭제