3.23 - Delete Btn

javascript로 delete button을 만들어 봤다.

 

이 버튼을 눌렀을때 list down된 li들이 삭제될 수 있도록

    <script type="text/javascript">

    /* 
    address = ['1','2','3','4','5']; // 배열 > contains 'length' 괄호안에 변수를 추가한다
    address.push('kim'); //변수 추가 또 다른 방법
    console.log(address[]); 
    */

    /*const btnArr = [];*/

    function addCard(){
        /*각 button에 id값을 부여함
        const newId = btnArr.length;
        console.log(newId);*/

        //list>>글자를 추가함
        cardText = document.querySelector('#card_input'); // id 값을 받아서 변수에 담았다
        cardList = document.querySelector('.list'); // 내용 출력 영역을 변수에 담음
        li = document.createElement('li'); //내용을 출력하는 최소단위 element
        li.innerHTML = cardText.value; // li안에 cardText의 내용을 넣기위해서

        //button을 추가함
        delBtn = document.createElement('button'); //li안에 버튼 생성
        delBtn.innerHTML = 'X'; // <button> X </button> 와 같음 : button안에 내용을 넣기 위해서
        /*delBtn.setAttribute('id','0'); /*setAttribute : 속성값(id)을 넣기위해 >> button에
                                            <button id="[newId]> X </button>와 같음"*/
        delBtn.onclick = function(){ //delBtn에 onclick이 발생이 되면 function안에 있는 내용이 실행됨
            cardList.removeChild(this.parentNode); //cardList의 child를 지워준다 정확하게 'this'parentNode
            /*
                cardList = 내룔 출력 영역 설정
                removeChild() = method안에있는 값 노드 제거
                this.parentNode = 내 부모 element를 선택 
            */
        }
        li.appendChild(delBtn); /* li element안에 지금까지 만들었던 delBtn을 넣는다
                                <li>[cardText.value]<button id="[newId]"> X </button></li>
                                */
        
        cardList.appendChild(li); //cardList 안에 li를 넣어서 묶는다.
        
        //btnArr.push(cardText.value); //배열에 cardText.value를 넣는다.
    }

    </script>

 

setAttribute : 특정 개체에 속성값을 부여하기 위해 사용함

 

removeChild : ()안에있는 값을 제거 >> removeChild는 자식요소만 삭제할 수 있는 건가?

 

/**/안에 있는 건 필요없는 code.

>> array

 

Array : 배열

배열은 개체의 개수가 너무 많을때 모두에게 id를 자동으로 부여해주기 위해 사용한다. >> length로 길이값을 준다.

 

이번 code에서 새로 생성되는 li안에 value값과 삭제 버튼을 줬다.

그리고 삭제버튼을 눌렀을때 생성되었던 li가 삭제되게 하기위해 코드를 작성했다.