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

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

QA

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

답변 1

본문

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

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

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

 

 

const checkDelate = document.querySelector('.check_delate');
 
function addd(){ //add버튼이 눌릴 때
    let id = Date.now();
    if (text.value==false){   //만약 text입력칸에 아무것도 안 적고 add를 눌렀다면,
        alert('할 일을 입력해주세요')  //경고창이 뜨고
    }else{  //그게 아니라 무언가 쓰여져 있다면
        // 추가할 태그들 상수 지정하기
        const li = document.createElement('li');//li태그 추가
        const check = document.createElement('input'); //체크박스 하나 만들고
        const span = document.createElement('span'); //글자 넣을 스판 태그 만들고
       
       
       
       
        //위 상수들에게 클래스 추가하기
        span.id='tt'  // span에 tt id속성값 추가
        xButton.classList.add('btbt')  // 삭제 버튼에 class="btbt"인 클래스 속성값을 추가한다.
        label.htmlFor='chchc'+id //라벨은 for을 정해줘야하는데, 그 값은 체크박스 id 속성값과 같아야 연결이 가능하다.
        check.id='chchc'+id// 라벨 for과 체크박스의 id가 같아야 연결이 되기 때문에 체크박스에도 id를 추가했다.하지만 id는 각기 다른 속성값을 가져야 하므로 id라는 변수 추가함.
 
       
 
        //하위 항목에 추가할 타겟 정함
        ul.appendChild(li)   // ul태그에 li태그가 하위요소로 들어감
        li.appendChild(span)   // li태그에 span태그가 하위요소로 들어감
       
 
        span.textContent = text.value  //span의 텍스트는 text에서 입력한 값과 같다.
        check.type='checkbox' // 상수 체크의 input타입은 체크박스이다.
 
        check.addEventListener('click',function (){
            span.classList.toggle('checkC') //toggle은 해당 속성값이 있으면 삭제를, 없으면 생성을 해주는 역할이다.
            span.classList.remove('tt')
        }) //체크박스 클릭시 아래 checkClick함수 실행
 
        checkDelate.addEventListener('click',function(){ //선택삭제 버튼을 누른다면, 이 항수가 실행될 것이다.
            let spsp = span.parentElement;  //스판 태그의 부모 태그를 spsp변수명으로 지정해 놓음
            let conn = confirm('선택 항목들을 삭제하시겠습니까?') //선택 삭제 버튼을 누르면 이 confirm창이 뜸 그걸 conn변수명으로 지정함.
            if (conn==true){ //만약 확인창에서 사용자가 확인을 눌렀다면,
                if (span.classList==''){ //만약 확인을 눌렀만 span태그의 클래스 속성값이 없다면~
                    alert('선택한 항목이 없습니다.') //경고창으로 성택한 항목이 없다고 나오고
                }else{ //그게 아니라면
                    spsp.remove(); //변수로 지정해놓은 spsp를 삭제한다.
                }
            }else{ //사용자가 취소를 눌렀다면
                return false;
            }
        })
     
} }
button.addEventListener('click',addd)

 

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

이 질문에 댓글 쓰기 :

답변 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;
    }
});

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 25
© SIRSOFT
현재 페이지 제일 처음으로