자바스크립트 confirm 반복 수행 질문 드립니다..!
본문
지금 만들고 있는 투 두 리스트 기능 중 선택 삭제하기 기능을 만들었는데, 나타나는 오류가
할 일 목록 갯수 만큼 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;
}
});
답변을 작성하시기 전에 로그인 해주세요.
