본문 바로가기

Code

3.23 - Delete Btn(Code)

<script type="text/javascript">

const btnArr = [];

function addCard(){

        const newId = btnArr.length;
        console.log(newId);

        //list>>글자를 추가함
        cardText = document.querySelector('#card_input'); 
        cardList = document.querySelector('.list'); 
        li = document.createElement('li'); 
        li.innerHTML = cardText.value; 

        //button을 추가함
        delBtn = document.createElement('button'); 
        delBtn.innerHTML = 'X'; 
        delBtn.setAttribute('id',newId); 
        delBtn.onclick = function(){
            cardList.removeChild(this.parentNode); 

        }
        li.appendChild(delBtn); 
        
        cardList.appendChild(li); 
        
        btnArr.push(cardText.value); 
    }

</script>

its still working w/o array

 

LIKE:

<script type="text/javascript">


    function addCard(){

        cardText = document.querySelector('#card_input');
        cardList = document.querySelector('.list');
        li = document.createElement('li');
        li.innerHTML = cardText.value; 

        delBtn = document.createElement('button');
        delBtn.innerHTML = 'X';
        
        delBtn.onclick = function(){ 
        	cardList.removeChild(this.parentNode);        
        }
        
        li.appendChild(delBtn);
        
        cardList.appendChild(li);
    }

</script>

RESULT : X버튼을 누르면 렬이 삭제됨

'Code' 카테고리의 다른 글

3.26  (0) 2021.03.26
CODE  (0) 2021.03.24
3.22 - To do list(Code)  (0) 2021.03.22
3.20  (0) 2021.03.22
3.18 - 프로그래머스  (0) 2021.03.18