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