인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

gangsugi님의 프로필 이미지
gangsugi

작성한 질문수

입문자를 위한, ES6+ 최신 자바스크립트 입문

삭제를 다 하고 싶은데요,,,

작성

·

311

0

앞전 질문에서 앞에 추가하기도 X 버튼이 뜨게 잘 되었습니다. 감사드려요...복사하지 않고 입력을 해본다는게 그만 오타를 못찾는 바람에 안되었습니다.

한가지 더 추가로 해보려고 하는데, 타깃제거를 클릭하면 추가한 목록들을 다 지우게 하고 싶어서 수정을 해보았는데,,,,

추가버튼을 클릭할때 추가된 li에 item 이라는 클래스를 다 만들게 했구요

 

li.classList.add('item');

그랬더니 추가항목에 클래스가 잘 추가된거까지는 확인을 했습니다.

그런다음,,,

removeTargetBtn.addEventListener('click', function(){
        let targetList = document.querySelectorAll('.item');
        targetList.remove();
      });

querrySelectorAll 로 추가된 클래스 item 를 모두 가져와서 remove를 했는데,,,,,

문법상으로 틀린게 있는거 같은데....ㅠㅠ

 

답변 1

0

짐코딩님의 프로필 이미지
짐코딩
지식공유자

안녕하세요 :)
querySelectAll()에 의해 반환된 객체는 NodeList 객체입니다.

const itemList = document.querySelectorAll('.item');
// 클래스 이름 출력
console.log(itemList.constructor.name); // NodeList

NodeList API에는 remove()라는 메서드를 지원하지 않습니다.
https://developer.mozilla.org/en-US/docs/Web/API/NodeList (NodeList API 참고)

아래와 같은 방법으로 삭제 가능합니다.

const itemList = document.querySelectorAll('.item');
itemList.forEach(item => item.remove());

감사합니다.

 

gangsugi님의 프로필 이미지
gangsugi

작성한 질문수

질문하기