테스트 사이트 - 개발 중인 베타 버전입니다

자바스크립트 confirm 반복 수행 질문 드립니다..!

aiai1505150 1년 전 조회 38,576

지금 만들고 있는 투 두 리스트 기능 중 선택 삭제하기 기능을 만들었는데, 나타나는 오류가

할 일 목록 갯수 만큼 confirm이 반복 되고나서야 끝난다는 것입니다...

if문이라 반복문 탈출 break는 사용 못하고... 다른 방법이 있을까싶어 질문드려봅니다...!

 

 

</strong></p>

<p>const checkDelate = document.querySelector('.check_delate');</p>

<p> </p>

<p>function addd(){ //add버튼이 눌릴 때</p>

<p>    let id = Date.now();</p>

<p>    if (text.value==false){   //만약 text입력칸에 아무것도 안 적고 add를 눌렀다면,</p>

<p>        alert('할 일을 입력해주세요')  //경고창이 뜨고</p>

<p>    }else{  //그게 아니라 무언가 쓰여져 있다면</p>

<p>        // 추가할 태그들 상수 지정하기</p>

<p>        const li = document.createElement('li');//li태그 추가</p>

<p>        const check = document.createElement('input'); //체크박스 하나 만들고</p>

<p>        const span = document.createElement('span'); //글자 넣을 스판 태그 만들고</p>

<p>       </p>

<p>       </p>

<p>       </p>

<p>       </p>

<p>        //위 상수들에게 클래스 추가하기</p>

<p>        span.id='tt'  // span에 tt id속성값 추가</p>

<p>        xButton.classList.add('btbt')  // 삭제 버튼에 class="btbt"인 클래스 속성값을 추가한다.</p>

<p>        label.htmlFor='chchc'+id //라벨은 for을 정해줘야하는데, 그 값은 체크박스 id 속성값과 같아야 연결이 가능하다.</p>

<p>        check.id='chchc'+id// 라벨 for과 체크박스의 id가 같아야 연결이 되기 때문에 체크박스에도 id를 추가했다.하지만 id는 각기 다른 속성값을 가져야 하므로 id라는 변수 추가함.</p>

<p> </p>

<p>       </p>

<p> </p>

<p>        //하위 항목에 추가할 타겟 정함</p>

<p>        ul.appendChild(li)   // ul태그에 li태그가 하위요소로 들어감</p>

<p>        li.appendChild(span)   // li태그에 span태그가 하위요소로 들어감</p>

<p>       </p>

<p> </p>

<p>        span.textContent = text.value  //span의 텍스트는 text에서 입력한 값과 같다.</p>

<p>        check.type='checkbox' // 상수 체크의 input타입은 체크박스이다.</p>

<p> </p>

<p>        check.addEventListener('click',function (){</p>

<p>            span.classList.toggle('checkC') //toggle은 해당 속성값이 있으면 삭제를, 없으면 생성을 해주는 역할이다.</p>

<p>            span.classList.remove('tt')</p>

<p>        }) //체크박스 클릭시 아래 checkClick함수 실행</p>

<p> </p>

<p>        checkDelate.addEventListener('click',function(){ //선택삭제 버튼을 누른다면, 이 항수가 실행될 것이다.</p>

<p>            let spsp = span.parentElement;  //스판 태그의 부모 태그를 spsp변수명으로 지정해 놓음</p>

<p>            let conn = confirm('선택 항목들을 삭제하시겠습니까?') //선택 삭제 버튼을 누르면 이 confirm창이 뜸 그걸 conn변수명으로 지정함.</p>

<p>            if (conn==true){ //만약 확인창에서 사용자가 확인을 눌렀다면,</p>

<p>                if (span.classList==''){ //만약 확인을 눌렀만 span태그의 클래스 속성값이 없다면~</p>

<p>                    alert('선택한 항목이 없습니다.') //경고창으로 성택한 항목이 없다고 나오고</p>

<p>                }else{ //그게 아니라면</p>

<p>                    spsp.remove(); //변수로 지정해놓은 spsp를 삭제한다.</p>

<p>                }</p>

<p>            }else{ //사용자가 취소를 눌렀다면</p>

<p>                return false;</p>

<p>            }</p>

<p>        })</p>

<p>     </p>

<p>} }</p>

<p>button.addEventListener('click',addd)</p>

<p><strong>

 

해당 질문에 불필요한 코드들은 지웠습니다..!

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

웅푸
1년 전

checkDelate.addEventListener('click', function() {
    let conn = confirm('선택 항목들을 삭제하시겠습니까?');
    if (conn == true) {
        const selectedItems = document.querySelectorAll('.checkC');
        selectedItems.forEach(function(item) {
            item.parentElement.remove();
        });
    } else {
        return false;
    }
});

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인