[Java] Delete button

배열을 쓰는 이유 :강력하게 줄일 수 있음

 

  <script type="text/javascript">

        const btnArr = []; /*아직 안배움*/

        function addCard(){

            const newID = btnArr.length; /*0을 s넣은 거임 */

            console.log(newID)

            cardInput=document.querySelector('#card_input');

            /*input box 아이디값을 받아서 변수에 담았다 */

            cardList=document.querySelector('.cardList');

              /*내용 출력하는 영역 설정 */

            li=document.createElement('li');

              /*내용 출력하는 최소단위 엘리먼트 */

            li.innerHTML=cardInput.value;

              /*li안에 내용을 넣기위해서 :cardInput에 있는 글자를 넣기위해 */

            delBtn=document.createElement('button');

              /*input box 아이디값을 받아서 변수에 담았다 */

                /*li안에 버튼을 넣기위해 <button></button> 만 생성함*/

            delBtn.innerHTML='X'; /*<button id="btn1">X</button> 속성값*/

              /*버튼안에 내용을 넣기 위해서 <button>x</button> */

            delBtn.setAttribute('id','newID');/* 속성값을 만들어 줄 수 있다*/

              /*버튼의 속성값을 넣기위해 <button id="[newID]">X</button> */

            delBtn.onclick=function(){ /*버튼을 클릭하면 {}안에 있는 내용이 실행 이벤트 발생 */

                cardList.removeChild(this.parentNode);

                /* removeChild는 node삭제, 내가 클릭한 버튼의 부모를 찾아서 지움

                cardList = 내용을 출력한 영역 설정부분이다.

                removeChild() 매서드 안에 있는 값을 노드제거 

                this.parentNode = this 개념 이해 

                parentNode는 내 현재의 상의 element 즉 부모 element를 뜻함

                여기서는 li를 지우겠다*/

      

 

            }

            li.appendChild(delBtn); 

            /* li엘리먼트 안에 지금까지 만들었던 delBtn을 넣는다.  

            

            <li> [cardInput.value] <button id="[newID]">X<button></li>*/

            cardList.appendChild(li);

            /* cardlist안에 li를 넣어서 완벽하게 만든다*/

            btnArr.push(cardInput.value);

            /* 배열에 cardInput.value를 넣는다*/

        

   

           

        }

        </script>